Week 3: Monday - Hangman

[coolaj86]

Hangman

Here are the rules:

• The computer selects a word at random from a wordbank and shows the user a "blanked" version using underscores
• The user can make 8 guesses.
• If the user guess correct, print the word with underscores for unguessed letters and the actual letters for correctly guessed letters.
• If the user guesses incorrect, print the number of guesses left

Bonus: use jQuery (sample code that may help with the bonus: https://gist.github.com/coolaj86/5905472)

Hints

This should be the output if the word is watermelon and I have guessed ["e", "m", "l"]:

_ _ _ e _ m e l _ _

This should be the output if I guess incorrectly for the 5th time:

3 guesses left!

• get it working in the console before you add jQuery events

Console

At the end you should have a function guess that accepts a single letter.
Each time guess is called it should be printing out either the number of guesses remaining or the correctly guessed words.

1. Don't worry about inputs, just follow these steps. We'll add inputs later with jQuery
2. Focus on just 1 word to start. Worry about the wordbank array later.
3. How can I iterate over the word? BIG HINT: The string .split('') method will come in handy
4. Focus on just 1 guessed letter. How can you use console.log() to show a modified copy of the string that only contains the letters in the guessed letter?
5. What if you had just 2 letters? How can you show a modified copy of the string that has both of the letters guessed?
6. Now create an array of guesses. Create an array of guesses. Use forEach to iterate over each guess.
7. How many guesses does the user get when they start? How can you keep track of how many attempts have failed?
8. Modify your forEach loop to keep track of how many guesses are left.
9. Modify your forEach loop to be a while loop that uses prompt

jQuery

Start with this template:

function main() {
  var $ = window.jQuery
    ;

  /* copy your console code here (the stuff inside of main) */
}
window.jQuery(main);

1. create a <button type="button" class="js-make-guess"></button>
2. assign a click handler to js-make-guess that gets prints something to the screen
3. create an <input class="js-letter" /> and get it's value with jQuery
4. modify the button handler so that it prints out the input's value
5. modify the button handler so that it calls guess and passes in the input's value
6. modify the original code so that it returns a string instead of using console.log
7. create a <div class="js-message"></div> and use jQuery's .text() method to show the message in the browser

[megano]

For Hangman is the first step show the user # letters in the word (vs the word itself)? Right now it says: "The computer selects a word at random from a wordbank and shows it to the user".

[coolaj86]

Good catch. Yes, show the number of blank spaces such as _ _ _ _ _ _ _ _ _ _ for watermelon