AhmedHasarMariam-Hangman

README.md

@@ -1,26 +1,34 @@
 # Create a hangman game
 
+Team:
+1)Ahmed Mohammed Hassan
+2)Mariam
+3)Hasar Wshar Ali
+
 ## Overview
+
 Create a hangman game! <br>
 Example of what we want to accomplish [here](https://codepen.io/cathydutton/pen/ldazc). You can use it to know exactly what the game is about, but do not copy it. Use your own way. Be as creative as you can!
 
 ![Example of hangman game](images/example.jpg)
+
 ### Requirements
 
 1. HTML:
-    1. Add buttons that correspond to each letter from a to z.
-    2. Add a section that will hold the blanks that are going to be equal to the number of characters for the current word.
-    3. Add a div to show the man who's going to be hanged if you lose.
-    4. Add a counter from 10 that will decrease by 1 with every wrong guess.
-    4. Add a button to play again.
+
+   1. Add buttons that correspond to each letter from a to z.
+   2. Add a section that will hold the blanks that are going to be equal to the number of characters for the current word.
+   3. Add a div to show the man who's going to be hanged if you lose.
+   4. Add a counter from 10 that will decrease by 1 with every wrong guess.
+   5. Add a button to play again.
 
 2. JS:
-    1. At the beginning use fetch API to retrieve a random word from this api https://random-word-api.herokuapp.com/word?number=1. Make the blanks equal the number of letters in the random word.
-    2. Everytime the user clicks on one of the letters the following should happen:
-        1. The random word is search through to find if it contains the clicked letter, if the clicked letter is part of the random word's letters then it gets shown up instead of the space, if not, then the lives counter is decreased by one. In some rare cases a clicked letter corresponds to two letters in the generated word, if that happens then show both words.
-        2. The button becomes disabled and should only work once.
-    3. If the lives counter reaches 0 then the game is over and the hangman should be HANGED! 👨‍🦱🔪
-    4. Clicking on the play again button should do the whole process again.
+   1. At the beginning use fetch API to retrieve a random word from this api https://random-word-api.herokuapp.com/word?number=1. Make the blanks equal the number of letters in the random word.
+   2. Everytime the user clicks on one of the letters the following should happen:
+      1. The random word is search through to find if it contains the clicked letter, if the clicked letter is part of the random word's letters then it gets shown up instead of the space, if not, then the lives counter is decreased by one. In some rare cases a clicked letter corresponds to two letters in the generated word, if that happens then show both words.
+      2. The button becomes disabled and should only work once.
+   3. If the lives counter reaches 0 then the game is over and the hangman should be HANGED! 👨‍🦱🔪
+   4. Clicking on the play again button should do the whole process again.
 
 ## Coding Phase
 
@@ -81,11 +89,11 @@ Just as in the **subject**, use the imperative, present tense: “change” not
 - Don't leave any logs inside the code.
 - All variables should be `const` except for specific cases where you will need to use `let`
 - Variables should use camelCase naming convention
-- CSS classes should follow BEM naming convention. *You can find more about it [here](http://getbem.com/naming/).*
+- CSS classes should follow BEM naming convention. _You can find more about it [here](http://getbem.com/naming/)._
 - Leave only one empty line between CSS classes. This also goes for different purpose code blocks (like `imports` and variables under it).
 - Make sure your naming is right and not confusing i.e. the `navbar` shouldn't be named `header` or when you fetch `movies` your function should return `movies` not `data`
 - Make sure you clean your imported modules or files that you don't use before committing. The same goes for any variable, function or piece of code not used.
-- Don't repeat yourself (DRY). Make sure the code you write is reusable and reduce repetition of information of all kinds. For example, don't write two functions that do the same or almost the same job. *Read more about DRY [here](https://en.wikipedia.org/wiki/Don't_repeat_yourself).*
+- Don't repeat yourself (DRY). Make sure the code you write is reusable and reduce repetition of information of all kinds. For example, don't write two functions that do the same or almost the same job. _Read more about DRY [here](https://en.wikipedia.org/wiki/Don't_repeat_yourself)._
 
 If you have issues, google them.
 <br>
@@ -95,6 +103,5 @@ If you still have issues, talk to your instructors.
 <br>
 <br>
 
-
-NOTE: Be creative with the game's mechanics and design!!! 
-Have fun, and Good luck :D 
+NOTE: Be creative with the game's mechanics and design!!!
+Have fun, and Good luck :D

index.html

@@ -1,14 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
-  <link rel="stylesheet" href="./styles/style.css">
+  <link rel="stylesheet" href="./styles/style.css" />
 </head>
+
 <body>
-
+  <h1 class="header">HANGMAN</h1>
+
+  <h2 class="header">VANILLA JAVASCRIPT HANGMAN GAME</h2>
+
+  <h3 class="header">
+    ! You can use 2 helps but each will count as a Mistake and cost you An Attempt !
+    <br />Use the alphabet below to guess the word in less than 10 attempts:</h3>
+
+  <div id="letters"></div>
+
+  <div id="blanks"></div>
+
+  <div id="gameover">Game Over!</div>
+
+  <div id="answer">The Answer was:</div>
+
+  <div id="counters">Mistakes: 0 || Found Letters: 0</div>
+
+  <div id="hangman">
+    <img id="hang" src="" />
+  </div>
+
+  <div class="buttons">
+    <button id="help">Help<br />! -1 attempt !</button>
+    <button id="replay">Restart Game!</button>
+  </div>
 
   <script src="./scripts/script.js"></script>
 </body>
+
 </html>

scripts/script.js

@@ -0,0 +1,172 @@
+String.prototype.replaceAt = function (index, replacement) {
+    return (
+        this.substr(0, index) +
+        replacement +
+        this.substr(index + replacement.length)
+    );
+};
+
+const alpha = Array.from(Array(26)).map((e, i) => i + 65);
+const alphabet = alpha.map((x) => String.fromCharCode(x).toLowerCase());
+
+function randomInteger(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const letters = document.getElementById("letters");
+const blanks = document.getElementById("blanks");
+const gameover = document.getElementById("gameover");
+const answer = document.getElementById("answer");
+const counters = document.getElementById("counters");
+const hang = document.getElementById("hang");
+const replay = document.getElementById("replay");
+const help = document.getElementById("help");
+
+alphabet.forEach((letter, i) => {
+
+    const newButton = document.createElement("button");
+    newButton.innerHTML = letter;
+    newButton.id = letter;
+    newButton.setAttribute("class", "alphaButton");
+    newButton.style.margin = "0px 5px";
+    newButton.style.width = "40px";
+    newButton.style.height = "40px";
+    letters.append(newButton);
+
+    if (i == 12) {
+        const breaking = document.createElement("br");
+        const breaking2 = document.createElement("br");
+        letters.append(breaking);
+        letters.append(breaking2);
+    }
+
+});
+
+fetch("https://random-word-api.herokuapp.com/word?number=1")
+    .then(response => response.json())
+    .then(json => {
+
+        const word = json[0];
+        for (let i = 0; i < word.length; i++) {
+            blanks.innerHTML += "_ ";
+        }
+
+        let rightCount = 0;
+        let falseCount = 0;
+        let loser = false;
+        const checkLetter = (e) => {
+
+            const clicked = e.target.innerHTML;
+            if (e.target.nodeName === "BUTTON") {
+
+                let rightLetter = false;
+                if (loser == false) {
+                    if (word.includes(clicked)) {
+                        rightLetter = true;
+                        for (let i = 0; i < word.length * 2; i += 2) {
+                            if (word[i / 2] == clicked) {
+                                blanks.innerHTML = blanks.innerHTML.replaceAt(i, clicked);
+                                rightCount++;
+                            }
+                        }
+                    }
+                }
+
+                if (falseCount < 10) {
+                    e.target.setAttribute("disabled", "true");
+                    if (rightLetter == false) {
+                        falseCount++;
+                        hang.setAttribute("src", `./images/${falseCount}.png`);
+                    }
+                    counters.innerHTML =
+                        "False: " + falseCount + " || Found Letters: " + rightCount;
+                }
+
+                if (falseCount == 10) {
+                    gameover.style.display = "block";
+                    answer.innerHTML += '"' + word + '"';
+                    answer.style.display = "block";
+                    loser = true;
+                    falseCount++;
+                }
+
+                if (loser == false) {
+                    if (rightCount == word.length) {
+                        gameover.innerHTML = "Congratulations 🎉!";
+                        gameover.style.color = "darkgreen";
+                        gameover.style.display = "block";
+                        answer.innerHTML += '"' + word + '"';
+                        answer.style.display = "block";
+                        falseCount = 11;
+                        loser = true;
+                    }
+                }
+
+            }
+
+        };
+        letters.addEventListener("click", checkLetter);
+
+        replay.addEventListener("click", () => {
+            location.reload();
+        });
+
+        let helpCount = 0;
+        const helper = () => {
+
+            if (falseCount < 10) {
+
+                helpCount++;
+                let clicked = word[randomInteger(0, word.length - 1)];
+                while (blanks.innerHTML.includes(clicked)) {
+                    clicked = word[randomInteger(0, word.length - 1)];
+                }
+                const buttonDisable = document.getElementById(clicked);
+
+                if (loser == false) {
+                    rightLetter = true;
+                    for (let i = 0; i < word.length * 2; i += 2) {
+                        if (word[i / 2] == clicked) {
+                            blanks.innerHTML = blanks.innerHTML.replaceAt(i, clicked);
+                            rightCount++;
+                        }
+                    }
+                }
+
+                falseCount++;
+                hang.setAttribute("src", `./images/${falseCount}.png`);
+                counters.innerHTML =
+                    "Mistakes: " + falseCount + " || Found Letters: " + rightCount;
+
+                if (falseCount < 10) buttonDisable.setAttribute("disabled", "true");
+
+                if (falseCount == 10) {
+                    gameover.style.display = "block";
+                    answer.innerHTML += '"' + word + '"';
+                    answer.style.display = "block";
+                    loser = true;
+                    falseCount++;
+                }
+
+                if (loser == false) {
+                    if (rightCount == word.length) {
+                        gameover.innerHTML = "Congratulations 🎉!";
+                        gameover.style.color = "darkgreen";
+                        gameover.style.display = "block";
+                        answer.innerHTML += '"' + word + '"';
+                        answer.style.display = "block";
+                        falseCount = 11;
+                        loser = true;
+                    }
+                }
+
+                if (helpCount == 2) {
+                    help.style.display = "none";
+                }
+
+            }
+
+        };
+        help.addEventListener("click", helper);
+
+    });