Permalink
Browse files

play button is functional

  • Loading branch information...
armoneyj210 committed Dec 3, 2019
1 parent 4b84eb4 commit cca915452dbc73c4ba2364c103c610acd367c9a6
Showing with 88 additions and 39 deletions.
  1. +1 −1 index.html
  2. +82 −38 script.js
  3. +5 −0 style.css
@@ -14,7 +14,7 @@
<h1>Jeopardy!</h1>
</header>

<!-- <button class="playButton">Play</button> -->
<button class="playButton">Play</button>
<footer>
<p class="score">Score : $0</p>
</footer>
120 script.js
@@ -9,45 +9,89 @@
// when the play button is clicked create the game board using a for loop
let categories = ["Food", "Science", "Music", "Film", "Sports", "Art"];

for (let i = 0; i < 36; i++) {
let gameBoard = document.createElement("div");

if (i >= 6 && i < 12) {
gameBoard.textContent = "$200";
gameBoard.setAttribute(`data-dollar`, "$200");
} else if (i >= 12 && i < 18) {
gameBoard.textContent = "$400";
gameBoard.setAttribute(`data-dollar`, "$400");
} else if (i >= 18 && i < 24) {
gameBoard.textContent = "$600";
gameBoard.setAttribute(`data-dollar`, "$600");
} else if (i >= 24 && i < 30) {
gameBoard.textContent = "$800";
gameBoard.setAttribute(`data-dollar`, "$800");
} else if (i >= 30 && i < 36) {
gameBoard.textContent = "$1000";
gameBoard.setAttribute(`data-dollar`, "$1000");
let playButton = document.querySelector(".playButton");
playButton.addEventListener(`click`, function() {
playButton.classList.remove("playButton");
playButton.classList.add("hidden");
for (let i = 0; i < 36; i++) {
let gameBoard = document.createElement("div");

if (i >= 6 && i < 12) {
gameBoard.textContent = "$200";
gameBoard.setAttribute(`data-dollar`, "$200");
} else if (i >= 12 && i < 18) {
gameBoard.textContent = "$400";
gameBoard.setAttribute(`data-dollar`, "$400");
} else if (i >= 18 && i < 24) {
gameBoard.textContent = "$600";
gameBoard.setAttribute(`data-dollar`, "$600");
} else if (i >= 24 && i < 30) {
gameBoard.textContent = "$800";
gameBoard.setAttribute(`data-dollar`, "$800");
} else if (i >= 30 && i < 36) {
gameBoard.textContent = "$1000";
gameBoard.setAttribute(`data-dollar`, "$1000");
}
document.body.appendChild(gameBoard).classList.add("square");
if (i >= 0 && i < 6) {
gameBoard.textContent = categories[i];
gameBoard.classList.remove("square");
gameBoard.classList.add("categories");
}
if (i % 6 === 0) {
gameBoard.setAttribute(`data-cat`, `food`);
} else if (i === 7 || i === 13 || i === 19 || i === 25 || i == 31) {
gameBoard.setAttribute(`data-cat`, `science`);
} else if (i === 8 || i === 14 || i === 20 || i === 26 || i === 32) {
gameBoard.setAttribute(`data-cat`, `music`);
} else if (i % 3 === 0) {
gameBoard.setAttribute(`data-cat`, `film`);
} else if (i === 10 || i === 16 || i === 22 || i === 28 || i === 34) {
gameBoard.setAttribute(`data-cat`, `sports`);
} else if (i === 11 || i === 17 || i === 23 || i === 29 || i === 35) {
gameBoard.setAttribute(`data-cat`, `art`);
}
}
document.body.appendChild(gameBoard).classList.add("square");
if (i >= 0 && i < 6) {
gameBoard.textContent = categories[i];
gameBoard.classList.remove("square");
gameBoard.classList.add("categories");
}
if (i % 6 === 0) {
gameBoard.setAttribute(`data-cat`, `food`);
} else if (i === 7 || i === 13 || i === 19 || i === 25 || i == 31) {
gameBoard.setAttribute(`data-cat`, `science`);
} else if (i === 8 || i === 14 || i === 20 || i === 26 || i === 32) {
gameBoard.setAttribute(`data-cat`, `music`);
} else if (i % 3 === 0) {
gameBoard.setAttribute(`data-cat`, `film`);
} else if (i === 10 || i === 16 || i === 22 || i === 28 || i === 34) {
gameBoard.setAttribute(`data-cat`, `sports`);
} else if (i === 11 || i === 17 || i === 23 || i === 29 || i === 35) {
gameBoard.setAttribute(`data-cat`, `art`);
}
}
});
// for (let i = 0; i < 36; i++) {
// let gameBoard = document.createElement("div");

// if (i >= 6 && i < 12) {
// gameBoard.textContent = "$200";
// gameBoard.setAttribute(`data-dollar`, "$200");
// } else if (i >= 12 && i < 18) {
// gameBoard.textContent = "$400";
// gameBoard.setAttribute(`data-dollar`, "$400");
// } else if (i >= 18 && i < 24) {
// gameBoard.textContent = "$600";
// gameBoard.setAttribute(`data-dollar`, "$600");
// } else if (i >= 24 && i < 30) {
// gameBoard.textContent = "$800";
// gameBoard.setAttribute(`data-dollar`, "$800");
// } else if (i >= 30 && i < 36) {
// gameBoard.textContent = "$1000";
// gameBoard.setAttribute(`data-dollar`, "$1000");
// }
// document.body.appendChild(gameBoard).classList.add("square");
// if (i >= 0 && i < 6) {
// gameBoard.textContent = categories[i];
// gameBoard.classList.remove("square");
// gameBoard.classList.add("categories");
// }
// if (i % 6 === 0) {
// gameBoard.setAttribute(`data-cat`, `food`);
// } else if (i === 7 || i === 13 || i === 19 || i === 25 || i == 31) {
// gameBoard.setAttribute(`data-cat`, `science`);
// } else if (i === 8 || i === 14 || i === 20 || i === 26 || i === 32) {
// gameBoard.setAttribute(`data-cat`, `music`);
// } else if (i % 3 === 0) {
// gameBoard.setAttribute(`data-cat`, `film`);
// } else if (i === 10 || i === 16 || i === 22 || i === 28 || i === 34) {
// gameBoard.setAttribute(`data-cat`, `sports`);
// } else if (i === 11 || i === 17 || i === 23 || i === 29 || i === 35) {
// gameBoard.setAttribute(`data-cat`, `art`);
// }
// }
// There shold be 36 squares; 30 for questions and 6 for categories

// as the game board is created add the class square to the tiles
@@ -11,6 +11,8 @@ header {
body {
background-color: black;
width: 100;
box-sizing: border-box;
margin: 10px auto;
}
.categories {
float: left;
@@ -64,3 +66,6 @@ div:hover {
font-size: 2em;
text-shadow: 1px 1px #fad201;
}
.hidden {
display: none;
}

0 comments on commit cca9154

Please sign in to comment.