HotPlate

You have a 16x16 grid of which the 4 centermost cells are always 100 degrees and the cornermost cells are always 0 degrees. All other cells start at 50 degrees.

For example, a 6x6 grid would look like this:

|  0  | 50  | 50  | 50  | 50  |  0  |
| 50  | 50  | 50  | 50  | 50  | 50  |
| 50  | 50  | 100 | 100 | 50  | 50  |
| 50  | 50  | 100 | 100 | 50  | 50  |
| 50  | 50  | 50  | 50  | 50  | 50  |
|  0  | 50  | 50  | 50  | 50  |  0  |

Each turn the temperature of each cell (aside from the 4 hot and 4 cold) changes to be the average of the 4 adjacent cells left, right, up, and down.

The goal is to determine how many turns it takes until not a single cell has changes more than 0.001 degrees and then print out the grid.

For example, the result of running on a 6x6 grid would be this:

Grid: 6x6
Turns: 57
Diff: 0.001
   0.00  33.33  49.99  49.99  33.33   0.00
  33.33  50.00  66.66  66.66  50.00  33.33
  49.99  66.66 100.00 100.00  66.66  49.99
  49.99  66.66 100.00 100.00  66.66  49.99
  33.33  50.00  66.66  66.66  50.00  33.33
   0.00  33.33  49.99  49.99  33.33   0.00
Actual Diff: 0.0009489096904715666

Or with a splash of color:

Bonus:
Print out a colorful web page grid using jQuery.
You'll need
a function to convert from wavelength to rgb.
Instead of a tight loop, only do one turn per millisecond and update the grid each turn so that you can watch it update (or 10 milliseconds, whatever number seems visually appealing).

Hint

Many find it conceptually simpler to use 2-dimensional arrays for this problem, however, it's easier to solve programmatically with a 1-dimensional array. Either approach will work. The former is easier to understand, the second is easier to code.

(more hints to come)

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

• Create an array with everyone in the class
• accept arguments for groupSize or numberOfPeople (one or the other, but not both)
• prints out rows of groups
• or prints out array of people
• hard code the arguments (or use window.pplpkr = pplpkr to export it to the console)

Bonus: use jQuery to take arguments from input elements (and a run button to run the function)

Hint: You'll need to instruct jQuery to run main rather than invoking it yourself: $(main); instead of main();