SEI-24 Joey

index.html

@@ -8,6 +8,7 @@ <h3>DOM Manipulation Template</h3>
     <input class="starter" id="input" placeholder="input"/>
     <h2>output:</h2>
     <div class="starter" id="output"></div>
+    <div class="starter2" id="output2"></div>
     <script>
       var display = function(data){
         var displayElement = document.querySelector('#output');
@@ -27,4 +28,4 @@ <h2>output:</h2>
     </script>
     <script src="script.js" charset="utf-8"></script>
   </body>
-</html>
+</html>

script.js

@@ -1,6 +1,87 @@
 console.log("hello script js");
 
-var inputHappened = function(currentInput){
-  console.log( currentInput );
-  return "WOW SOMETHING HAPPEND";
+
+var secretWord = "cat";
+var secretWordArr = secretWord.split("");
+var correctLettersGuessed = [];
+var wrongLettersGuessed = [];
+var tableFlip = "(╯ರ ~ ರ）╯︵ ┻━┻";
+var tableArr = tableFlip.split("");
+var strokes = [];
+var count = 0;
+var output2 = document.getElementById("output2");
+
+
+var inputHappened = function(currentInput) {
+
+    if ( currentInput.length == 1 && correctLettersGuessed.length != secretWordArr.length && isNaN(currentInput) ) {
+
+        var i = 0;
+        while ( i < secretWordArr.length ) {
+
+            //check if input matches iterated letter
+            if ( currentInput == secretWordArr[i] ) {
+                correctLettersGuessed.push(currentInput);
+                var output = "You guessed right!\n\nCorrect letters guessed so far: " + correctLettersGuessed.join(", ");
+            }
+
+            else {
+                wrongLettersGuessed.push(currentInput);
+                strokes.unshift(tableArr.shift());
+                output = "You guessed wrongly!\n\nWrong letters guessed so far: " + wrongLettersGuessed.join(", ");
+            }
+
+            i++;
+        }
+
+    }
+
+    else if ( correctLettersGuessed.length == secretWordArr.length )  {
+        output = "You won the game!";
+    }
+
+    else if ( currentInput.length != 1 )  {
+        output = "One alphabetical value only!";
+    }
+
+    else if ( !isNaN(currentInput) ) {
+        output = "Alphabets only!"
+    }
+
+    input.value = "";
+    return output;
+
 };
+
+
+// for ( i = 0 ; i < secretWord.length ; i ++ ) {
+
+//     //check if input matches iterated letter
+//     if ( currentInput == secretWord[i] ) {
+//         correctLettersGuessed.push(currentInput);
+//         var output = "You guessed right!\n\nCorrect letters guessed so far " + correctLettersGuessed.join(", ");
+//     }
+
+//     else {
+//         wrongLettersGuessed.push(currentInput);
+//         strokes.unshift(tableArr.shift());
+//         output = "You guessed wrongly!\n\nWrong letters guessed so far " + wrongLettersGuessed.join(", ");
+//     }
+
+// }
+
+
+// secretWordArr.forEach ( function ( letter ) {
+
+//         //check if input matches iterated letter
+//         if ( currentInput == letter ) {
+//             correctLettersGuessed.push(currentInput);
+//             var output = "You guessed right!\n\nCorrect letters guessed so far " + correctLettersGuessed.join(", ");
+//         }
+
+//         else {
+//             wrongLettersGuessed.push(currentInput);
+//             strokes.unshift(tableArr.shift());
+//             output = "You guessed wrongly!\n\nWrong letters guessed so far " + wrongLettersGuessed.join(", ");
+//         }
+// })

style.css

@@ -1,11 +1,11 @@
-.starter{
+.starter, .starter2 {
   font-size:30px;
   padding:10px;
   display:block;
   margin:40px;
   border:3px solid blue;
 }
 
-#output{
+#output, #output2 {
   background-color:pink;
-}
+}