David-Ko · David-Ko · Jan 17, 2019 · Jan 18, 2019 · Jan 18, 2019
diff --git a/hangman/1.jpg b/hangman/1.jpg
diff --git a/hangman/2.jpg b/hangman/2.jpg
diff --git a/hangman/3.jpg b/hangman/3.jpg
diff --git a/hangman/4.jpg b/hangman/4.jpg
diff --git a/hangman/5.jpg b/hangman/5.jpg
diff --git a/hangman/6.jpg b/hangman/6.jpg
diff --git a/hangman/gallows.jpg b/hangman/gallows.jpg
diff --git a/hangman/index.html b/hangman/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Page Title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+    <script defer src="main.js"></script>
+</head>
+<body>
+        <div class = 'keyboard'>   </div>
+        <div class = 'horizontal-bar'></div>
+        <div class = 'hangman'>
+            <img src="gallows.jpg" alt="">
+        </div>
+</body>
+</html>
diff --git a/hangman/main.css b/hangman/main.css
@@ -0,0 +1,43 @@
+.keyboard {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+.horizontal-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.letter {
+    border: 2px solid grey;
+    border-radius: 10%;
+    margin: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 10px;
+    font-size: 25px; 
+    width: 20px;
+    text-align: center;
+}
+
+.key-color{
+    background-color: coral;
+}
+
+.underline {
+    border-bottom: 2px solid grey;
+    border-radius: 10%;
+    margin: 10px;
+    font-family: Arial, Helvetica, sans-serif;
+    padding: 10px;
+    font-size: 25px; 
+    width: 20px;
+    text-align: center;
+}
+
+.hangman {
+    height: 150px;
+    width: 150px;
+    /* background-image: url("gallows.jpg"); */
+    /* background-image: "gallows.jpg" */
+}
diff --git a/hangman/main.js b/hangman/main.js
@@ -0,0 +1,93 @@
+
+function Hangman(){
+
+    let keyboard = document.querySelector(".keyboard")
+    function makeKeyboard () {
+        for (let i = 65; i < 91; i++){
+            let character = String.fromCharCode(i)
+            let letter = document.createElement("div")
+            letter.classList.add("letter")
+            letter.innerText = `${character}`
+            keyboard.append(letter)
+        };
+    };
+    makeKeyboard();
+
+    let letter = document.querySelectorAll(".letter");
+    let clickedLetter = "";
+    let guessedLetters = [];
+    function keyColor () {
+        letter.forEach(node=>{
+            node.addEventListener("click", event=>{
+                event.target.classList.add("key-color")
+                clickedLetter = event.target.textContent
+                if (matchedLetter() && !alreadyGuessed()){
+                    guessedLetters.push(clickedLetter);
+                    correctLetter();
+                } else if (alreadyGuessed()) {
+                    alert("You've already tried this letter")
+                } else {
+                    guessedLetters.push(clickedLetter);
+                    incorrectLetter();
+                };
+            });
+        });
+    };
+    keyColor();
+
+    const mySecretWordArray = ["STRANGER", "MONITOR", "CANADA", "LUKE"]
+    let randomIndex = Math.floor(Math.random()*mySecretWordArray.length)
+    const secretWord = mySecretWordArray[randomIndex]
+    const secretWordLength = secretWord.length
+    let horizontalBars = document.querySelector(".horizontal-bar")
+    for (let i = 0; i < secretWordLength; i++) {
+        let individualBar = document.createElement("div")
+        individualBar.classList.add("underline")
+        horizontalBars.append(individualBar)
+    };
+
+    function matchedLetter () {
+        return (secretWord.indexOf(clickedLetter) >= 0)
+    };
+
+    let correctAnswerLength = 0
+    const winSound = () => new Audio(`sounds/dog-bark-4.wav`);
+    function correctLetter(){
+        for (let index = 0; index < secretWordLength; index ++){
+            if (secretWord[index]===clickedLetter){
+                document.querySelector(".horizontal-bar").children[index].innerText = `${clickedLetter}`
+                correctAnswerLength += 1;
+            };
+            if (correctAnswerLength === secretWordLength){
+                winSound().play();
+                setTimeout(function(){
+                    alert("you won")
+                    document.location.reload()
+                }, 1500)
+            }
+        };
+    };
+
+    let pictureIndex = 0
+    const deadSound = () => new Audio(`sounds/small-explosion.wav`);
+    function incorrectLetter(){
+        let pictures = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg','6.jpg']
+        if (pictureIndex <= 4){
+            pictureIndex += 1 
+            document.querySelector("img").setAttribute("src", `${pictures[pictureIndex-1]}`)
+        } else {
+            document.querySelector("img").setAttribute("src", "6.jpg")
+            deadSound().play()
+            setTimeout(function() {
+                alert("you died")
+                document.location.reload()
+            }, 1000)
+        };
+    };
+
+    function alreadyGuessed() {
+        return guessedLetters.indexOf(clickedLetter) >= 0;
+    };
+};
+
+Hangman();
diff --git a/hangman/sounds/dog-bark-4.wav b/hangman/sounds/dog-bark-4.wav
diff --git a/hangman/sounds/small-explosion.wav b/hangman/sounds/small-explosion.wav