For this assignment, you will need to create a word guess game using the provided HTML at the top of this page. All of your code should be written in the included index.js file.
The markup for the game HTML is as follows:
<div class="game">
<h2 id="word-to-guess"></h2>
<div>Previous word: <span id="previous-word"></span></div>
<div>Incorrect Letters: <span id="incorrect-letters"></span></div>
<div>Remaining Guesses: <span id="remaining-guesses"></span></div>
<div class="score">
<span>Wins: <span id="wins">0</span></span>
<span>Losses: <span id="losses">0</span></span>
</div>
</div>Do NOT modify this index.html file. The included automated tests depend on this markup to run. All markup needed to complete this assignment is already included. There is also no need to write any CSS to complete this assignment; all required CSS for the assignment is already included.
The index.js file also includes a variable named words that is assigned an array of words to be used in the game:
var words = [
'bananas',
'grapes',
'carousel',
'milkshake',
'javascript',
'limousine',
'chocolate',
'programming',
'meatloaf',
'ukulele',
'mango'
]Do NOT modify this code while completing your assignment. The included automated tests rely on these words in this order to check the functionality of your code.
When the page loads, your code should select a word at random from the provided words array and place it in the #word-to-guess element with its letters replaced with underscores. The game should also display ten remaining guesses in the #remaining-guesses element. See figure 1 below for an example using the word "mango":
When the user presses a letter key, your code should check whether the letter is included in the word. If the letter is included, it should replace the underscores in the displayed word (displayed in the #word-to-guess element) with the instances of that letter. If the letter is not included, the #word-to-guess element should remain unchanged, but the incorrectly-guessed letter should be added to the #incorrect-letters element and the #remaining-guesses element should reflect one fewer remaining guess.
Assuming "mango" as the chosen word, see Figure 2 for the game state after the user has pressed the 'a' key, and Figure 3 for an incorrect guess after the user has pressed the 'k' key.
Note that if the user presses a non-letter key or the 'k' key repeatedly, there should be NO changes to the game state shown in figure 3.
See figure 4 below for an example of the game state where the user has pressed keys 'a', 'm', 'g', 'o', 'k', 'q', and 'z'. In this state, the game will be won if the user presses the 'n' key.
When the user presses 'n' in figure 4 above, the game should count a win and display '1' in the #wins element. The game should immediately proceed to the next randomly-chosen word and reset all of the other elements: incorrect letters should be blank, remaining guesses should show '10', and the #previous-word element should read "mango". See figure 5 below for an example.
Similarly, if the user had run out of remaining guesses before guessing the word, the game would also proceed to the next game and show an increase in losses instead of wins. See figure 6 below.
Automated tests are included with this assignment. Click the "run tests" button in the bottom right of the screen to run the test suite. To close the tests, click "close tests". To receive full credit, all automated tests must pass.
To receive full credit for this assignment, your program MUST:
When submitting this assignment, please include BOTH: