Created
October 21, 2022 09:28
-
-
Save pteacher/9809973409df7f0c9c33f13361fe1bad to your computer and use it in GitHub Desktop.
Guess the word with Arrays and DOM example for COM21 students at AIU
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JavaScripts Arrays Example</title> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <script src="js/main.js" defer></script> | |
| </head> | |
| <body onload="getData()"> | |
| <div class="container" id="container-game"> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function getData() { | |
| const gameContainer = document.getElementById("container-game"); | |
| const guessWord = "REACT"; | |
| for (let i = 0; i < guessWord.length; i++) { | |
| const node = document.createElement("div"); | |
| node.classList.add("block-letter"); | |
| const letterNode = document.createElement("div"); | |
| letterNode.innerHTML = guessWord[i]; | |
| letterNode.classList.add("block-visible"); | |
| node.addEventListener("click", toggleVisibility); | |
| node.appendChild(letterNode); | |
| gameContainer.appendChild(node); | |
| } | |
| } | |
| function toggleVisibility(el) { | |
| console.log("CLICK"); | |
| var x = el.target.firstElementChild; | |
| x.classList.toggle("block-visible"); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| button { | |
| background-color: seagreen; | |
| border-radius: 10px; | |
| padding: 10px; | |
| } | |
| .container { | |
| display: flex; | |
| } | |
| .block-letter { | |
| height: 30px; | |
| width: 30px; | |
| margin: 5px; | |
| background-color: brown; | |
| justify-content: space-around; | |
| } | |
| .block-visible { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment