Edrol97
Bronze Coder
Hi all,
I've got the following code for a Connections style game I am trying to create. What I want is for the groups to arrange after being picked correctly similar to New York Times Connections game. What I've got so far:
I've got the following code for a Connections style game I am trying to create. What I want is for the groups to arrange after being picked correctly similar to New York Times Connections game. What I've got so far:
JavaScript:
console.log(connections[0][0].words);
let col = document.getElementsByClassName("col");
console.log(col);
let con = connections[0];
let counter = 1;
let wordsarray = [];
let answers = [];
for (let i = 0; i < con.length; i++) {
console.log(con[i]);
let words = con[i].words;
let w = words.split(",");
console.log(w);
wordsarray = wordsarray.concat(w);
}
function alertbox() {
answers;
}
console.log(wordsarray);
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
array[i] = array[j];
array[j] = temp;
}
}
shuffle(wordsarray);
function ClickAnswer(e) {
if (e.target.getAttribute("selected") == "false") {
if (counter <= 4) {
counter = counter + 1;
e.target.style.backgroundColor = "hotpink";
e.target.setAttribute("selected", "true");
answers.push(e.target.innerHTML);
console.log(answers);
}
} else {
counter = counter - 1;
e.target.style.backgroundColor = "lightgrey";
e.target.setAttribute("selected", "false");
i = answers.indexOf(e.target.innerHTML);
answers.splice(i, 1);
console.log(answers);
}
}
for (let i = 0; i < col.length; i++) {
col[i].innerHTML = wordsarray[i];
col[i].addEventListener("click", ClickAnswer);
col[i].setAttribute("selected", "false");
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Connections</title>
<link rel="stylesheet" href="Connections.css" />
</head>
<body>
<div class="logo">INFOBORES</div>
<div id="connavigationbar">
<a href="Hi.html">Hi</a>
<a href="about_me.html">Bio</a>
<a href="Art.html">Art</a>
<a href="cv.html">CV</a>
<a href="Games.html">Games</a>
</div>
<div id="containercon">
<div class="connectionscontainer">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<button class="submit">Submit</button>
<script src="Connectionsdata.js"></script>
<script src="Connections.js"></script>
</body>
</html>
