Hangman Challenge: Part III

Max Kelly · Max Kelly · commit a1f3d36182fb · 2019-07-24T16:03:59.000+10:00
diff --git a/hangman/app.js b/hangman/app.js
@@ -1,14 +1,39 @@
-// Primitive value: string, number, boolean, null, undefined 
+// 1. Setup new "status" property with initial value of "playing" 
+// 2. Create method for recalculating status to "playing", "finished" or "Failed" 
+// 3. Call that method after a guess is processed 
+// 4. Use console.log to print the status
+
+const puzzleEl = document.querySelector("#puzzle"); // Selects the id element in html file.
+const guessesEl = document.querySelector("#guesses"); // Selects the id element in html file.
+const statusEl = document.querySelector('#status')
+const game1 = new Hangman("Cat", 2);
+
+puzzleEl.textContent = game1.getPuzzle();
+guessesEl.textContent = game1.remainingGuesses;
+statusEl.textContent = game1.status
+
+window.addEventListener("keypress", function(e) {
+  const guess = String.fromCharCode(e.charCode);
+  game1.makeGuess(guess);
+  puzzleEl.textContent = game1.getPuzzle();
+  guessesEl.textContent = game1.remainingGuesses;
+  statusEl.textContent = game1.status
+});
+
+
+
+//----- Primitive value: string, number, boolean, null, undefined -----
 
 // Object: myObject --> product --> Object.prototype --> null // This is how the below code will run it will go through product if nothing there it then goes through object.prototype if nothing there it returns undefined
 // Array: myArray --> Array.prototype  --> Object.prototype --> null
 // Function: myFunc --> Function.prototype --> Object.prototype --> null
 // String: myString --> String.prototype --> Object.prototype --> null
 // Number: myNumber --> Number.prototype --> Object.prototype --> null
 // Boolean: myBoolean --> Boolean.prototype --> Object.prototype --> null
+// const getString = 'Computer'
+// console.log(getString.split(''))
+
+// const otherString = new String('Phone')
+// console.log(otherString)
 
-const getString = 'Computer'
-console.log(getString.split(''))
 
-const otherString = new String('Phone')
-console.log(otherString)
diff --git a/hangman/hangman.js b/hangman/hangman.js
@@ -6,8 +6,30 @@ const Hangman = function (word, remainingGuesses) {
     this.word = word.toLowerCase().split('')
     this.remainingGuesses = remainingGuesses
     this.guessedLetters = ['job']
+    this.status = 'playing'
 }
 
+// The below is a status report. It will either be finished of failed depending on the guesses you make.
+Hangman.prototype.calculateStatus = function() {
+
+    let finished = true
+    this.word.forEach((letter) => {
+        if (this.guessedLetters.includes(letter)) {
+            finished = true
+        } else {
+            finished = false
+        }
+    })
+
+    if (this.remainingGuesses === 0) {
+       this.status = 'Failed'
+    } else if (finished) {
+        this.status = 'Finished'
+    } else {
+        this.status = 'Playing'
+    }
+};
+
 Hangman.prototype.getPuzzle = function () {
     let puzzle = ''
 
@@ -18,7 +40,7 @@ Hangman.prototype.getPuzzle = function () {
             puzzle += '*'
         }
     })
-       return puzzle
+    return puzzle 
 }
 
 Hangman.prototype.makeGuess = function (guess){
@@ -37,15 +59,5 @@ Hangman.prototype.makeGuess = function (guess){
     if (isUnique && isBadGuess) {
         this.remainingGuesses-- // This -- at the end performs the same way as this.remainingGuesses = this.remainingGuesses -1
     }
+    this.calculateStatus()
 }
-    
-const game1 = new Hangman('Cat', 2)
-console.log(game1.getPuzzle())
-console.log(game1.remainingGuesses)
-
-window.addEventListener('keypress', function (e) {
-    const guess = String.fromCharCode(e.charCode)
-    game1.makeGuess(guess)
-    console.log(game1.getPuzzle());
-    console.log(game1.remainingGuesses);
-})
diff --git a/hangman/index.html b/hangman/index.html
@@ -7,10 +7,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  
+  <p id="puzzle"></p>
+  <p id="guesses"></p>
+  <p id="status"></p>
     
 
 <script src="hangman.js"></script>
+<script src="app.js"></script>
 
 </body>
 </html>
diff --git a/notes-app/notes-function.js b/notes-app/notes-function.js
@@ -106,7 +106,7 @@ const renderNotes = (notes, filters) => {
     notes = sortNotes(notes, filters.sortBy)
     const filteredNotes = notes.filter( (note) => note.title.toLowerCase().includes(filters.searchText.toLowerCase()));
 
-    document.querySelector("#notes").innerHTML = ""; // This code allows us to whip the text that isn't relevant. This re renders the list
+    document.querySelector("#notes").innerHTML = ""; // This code allows us to wipe the text that isn't relevant. This re renders the list
 
     filteredNotes.forEach((note) => {
         const noteEl = generateNoteDOM(note); // This pulls code from notes-function.js
