inlinestyle/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title> Hangman Solution</title>
</head>
<body>
  <div id="container">
    <p id="message"></p>
    <img id="hangman" src="https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-0.png?raw=true"/>
    <div id="word"></div>
    <button id="newgame">New Game</button>
  </div>
</body>
</html>

## popcode.json
{"enabledLibraries":["jquery"],"hiddenUIComponents":["editor.css","editor.html"]}

## script.js
//On the line below define four variables secretWord, guesses, misses, and images
// Set secretWord equal to null
// Set correctGuesses equal to an empty array
// Set wrongGuesses equal to an empty array
// Set images to an array contataining all of your images links as strings (in order)

var secretWord = null;
var correctGuesses = [];
var wrongGuesses = [];
var images = [
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-0.png?raw=true',
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-1.png?raw=true',
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-2.png?raw=true2',
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-3.png?raw=true',
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-4.png?raw=true',
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-5.png?raw=true',
    'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-6.png?raw=true'];


// in the prepareGame() function below
// call the drawWord() function
// call the drawHangman() function
function prepareGame() {
  secretWord = ['J','A','V','A','S','C','R', 'I', 'P', 'T'];
  correctGuesses = [];
  wrongGuesses = [];
  drawWord();
  drawHangman();
}

// in this onWin() function below
// 1. alert "You won!"
function onWin() {

}

// in this onLose() function below
// 1. alert "You lost!"
function onLose() {

}

// in this checkIfWon() function below
// 1. Declare a variable hasAll and set equal to true
// 2. For each letter in secretWord
//    a. if correctGuesses does not include the letter (!) set variable hasAll to false
// 3. return hasAll
function checkIfWon() {

}

// in this checkIfLost() function below
// 1. declare a variable misses and set it equal to the length of wrongGuesses array
// 2. if misses is less than 6 return false else return true
function checkIfLost() {

}

// in the onCorrectGuess() function below
// 1. add the the letter variable to the array correctGuesses
// 2. call the drawWord function
// 3. if the checkIfWon() returns true call the onWin() function
function onCorrectGuess(letter) {

}

// in the onWrongGuess() function below
// 1. add the the letter variable to the array wrongGuesses
// 2. call the drawHangman function
// 3. if the checkIfLost() function returns true call the onLose() function
function onWrongGuess(letter) {

}

// in the judgeGuess function below
// 1. if the letter is included in secretWord, call the onCorrectGuess(letter) function
//    otherwise call onWrongGuess(letter) function
function judgeGuess(letter) {

}

// in the drawWord function below
// 1. empty the div tag with the id "word"
// 2. For each letter in secretWord
//    if correctGuesses includes letter append the letter
//    othewise append and underscore
function drawWord() {
  $("#word").empty();
  secretWord.forEach(function (letter) {
    if (correctGuesses.includes(letter)) {
      $("#word").append(letter);
    } else {
      $("#word").append("_");
    }
  });
}

// in the drawHangman function below
// 1. define a variable misses equal to the length of wrongGuesses
// 2. change the src of the img tag with the id hangman
//    to the correct image url based on the number of misses
function drawHangman() {
  var misses = wrongGuesses.length;
  $("#hangman").attr("src", images[misses]);
}

// in the onKeyDown function below
// 1. define a variable letter an set it equal to the correct letter
// 2. set letter equal to the upperCase of itself
// 3. call the judgeGuess function with

function onKeyDown(event) {
  var letter = event.key;
  letter = letter.toUpperCase();
  judgeGuess(letter);
}

// Call the prepare game function
// Initialize a jQuery keydown event handler
//       (Keydown function should take onKeyDown function as an argument)
$(document).ready(function() {
  prepareGame();
  $(document).keydown(onKeyDown);
});

## styles.css
body {
  font-family: Arial, Helvetica, sans-serif;
}

#container {
  width:40em;
  margin:auto;
  text-align:center;
}

#word {
  font-size:5em;
  letter-spacing:0.25em;
}

#message {
  font-size:1.5em;
  background-color:grey;
  border-radius:2em;
  padding:1em;
  display:none;
}

#newgame {
  display:none;
  font-size:1.5em;
  padding:0.5em;
  margin:1em;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title> Hangman Solution</title>
	</head>
	<body>
	<div id="container">
	<p id="message"></p>
	<img id="hangman" src="https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-0.png?raw=true"/>
	<div id="word"></div>
	<button id="newgame">New Game</button>
	</div>
	</body>
	</html>
	//On the line below define four variables secretWord, guesses, misses, and images
	// Set secretWord equal to null
	// Set correctGuesses equal to an empty array
	// Set wrongGuesses equal to an empty array
	// Set images to an array contataining all of your images links as strings (in order)

	var secretWord = null;
	var correctGuesses = [];
	var wrongGuesses = [];
	var images = [
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-0.png?raw=true',
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-1.png?raw=true',
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-2.png?raw=true2',
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-3.png?raw=true',
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-4.png?raw=true',
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-5.png?raw=true',
	'https://github.com/ScriptEdcurriculum/solutions2016/blob/master/year1/unit13/project2/images/Hangman-6.png?raw=true'];


	// in the prepareGame() function below
	// call the drawWord() function
	// call the drawHangman() function
	function prepareGame() {
	secretWord = ['J','A','V','A','S','C','R', 'I', 'P', 'T'];
	correctGuesses = [];
	wrongGuesses = [];
	drawWord();
	drawHangman();
	}

	// in this onWin() function below
	// 1. alert "You won!"
	function onWin() {

	}

	// in this onLose() function below
	// 1. alert "You lost!"
	function onLose() {

	}

	// in this checkIfWon() function below
	// 1. Declare a variable hasAll and set equal to true
	// 2. For each letter in secretWord
	// a. if correctGuesses does not include the letter (!) set variable hasAll to false
	// 3. return hasAll
	function checkIfWon() {

	}

	// in this checkIfLost() function below
	// 1. declare a variable misses and set it equal to the length of wrongGuesses array
	// 2. if misses is less than 6 return false else return true
	function checkIfLost() {

	}

	// in the onCorrectGuess() function below
	// 1. add the the letter variable to the array correctGuesses
	// 2. call the drawWord function
	// 3. if the checkIfWon() returns true call the onWin() function
	function onCorrectGuess(letter) {

	}

	// in the onWrongGuess() function below
	// 1. add the the letter variable to the array wrongGuesses
	// 2. call the drawHangman function
	// 3. if the checkIfLost() function returns true call the onLose() function
	function onWrongGuess(letter) {

	}

	// in the judgeGuess function below
	// 1. if the letter is included in secretWord, call the onCorrectGuess(letter) function
	// otherwise call onWrongGuess(letter) function
	function judgeGuess(letter) {

	}

	// in the drawWord function below
	// 1. empty the div tag with the id "word"
	// 2. For each letter in secretWord
	// if correctGuesses includes letter append the letter
	// othewise append and underscore
	function drawWord() {
	$("#word").empty();
	secretWord.forEach(function (letter) {
	if (correctGuesses.includes(letter)) {
	$("#word").append(letter);
	} else {
	$("#word").append("_");
	}
	});
	}

	// in the drawHangman function below
	// 1. define a variable misses equal to the length of wrongGuesses
	// 2. change the src of the img tag with the id hangman
	// to the correct image url based on the number of misses
	function drawHangman() {
	var misses = wrongGuesses.length;
	$("#hangman").attr("src", images[misses]);
	}

	// in the onKeyDown function below
	// 1. define a variable letter an set it equal to the correct letter
	// 2. set letter equal to the upperCase of itself
	// 3. call the judgeGuess function with

	function onKeyDown(event) {
	var letter = event.key;
	letter = letter.toUpperCase();
	judgeGuess(letter);
	}

	// Call the prepare game function
	// Initialize a jQuery keydown event handler
	// (Keydown function should take onKeyDown function as an argument)
	$(document).ready(function() {
	prepareGame();
	$(document).keydown(onKeyDown);
	});
	body {
	font-family: Arial, Helvetica, sans-serif;
	}

	#container {
	width:40em;
	margin:auto;
	text-align:center;
	}

	#word {
	font-size:5em;
	letter-spacing:0.25em;
	}

	#message {
	font-size:1.5em;
	background-color:grey;
	border-radius:2em;
	padding:1em;
	display:none;
	}

	#newgame {
	display:none;
	font-size:1.5em;
	padding:0.5em;
	margin:1em;
	}