erichlof/Hangman.html

## Hangman.html
<!DOCTYPE html>
<html>

<head>
	<title>Hangman</title>
</head>

<body>
	<h2>Hangman!</h2>

	<div id="hangmanWord"></div>
	<br>
	<div id="playerInfo"></div>
	<div id="guessesLeft"></div>
	<br>

	<label>Guess a letter: </label>
	<br>
	<input type="text" id="letterGuess" placeholder="enter a single letter">
	<br>
	<input type="submit" value="Submit" onclick="handleLetterGuess()">
	<br>
	<br>
	<label>Or, if you think you know the answer, guess the word:</label>
	<br>
	<input type="text" id="wordGuess" placeholder="enter the whole word">
	<br>
	<input type="submit" value="Submit" onclick="handleWordGuess()">
	(Warning: an incorrect word guess will end the game!)

	<script>

		let wordList = ["javascript", "monkey", "amazing", "pancake"];
		let secretWord;
		let answerArray = [];
		let guessedArray = [];
		let remainingLetters;
		let letterGuess, wordGuess;
		let alreadyGuessed = false;
		let numGuessesLeft = 10;
		let userQuit = false;
		let hangmanWordElement = document.getElementById("hangmanWord");
		let playerInfoElement = document.getElementById("playerInfo");
		let guessesLeftElement = document.getElementById("guessesLeft");
		let letterInputElement = document.getElementById("letterGuess");
		let wordInputElement = document.getElementById("wordGuess");


		setupNewGame();

		function handleLetterGuess()
		{
			letterGuess = letterInputElement.value.toLowerCase();
			letterInputElement.value = "";
			updateGameState();
		}

		function handleWordGuess()
		{
			wordGuess = wordInputElement.value.toLowerCase().trim();
			letterInputElement.value = "";
			wordInputElement.value = "";
			if (wordGuess === secretWord)
				playerInfoElement.innerHTML = "Good job! The answer was <b>" + secretWord + "</b>. - Starting new game...";
			else
				playerInfoElement.innerHTML = "Sorry, that's incorrect. The answer was <b>" + secretWord + "</b>. - Starting new game...";

			setTimeout(setupNewGame, 4000);
		}

		function setupNewGame()
		{
			playerInfoElement.innerHTML = "Good luck!";
			numGuessesLeft = 10;

			secretWord = wordList[Math.floor(Math.random() * wordList.length)];
			// clear out answerArray and guessedArray
			answerArray = [];
			guessedArray = [];

			for (let i = 0; i < secretWord.length; i++)
			{
				answerArray[i] = '_';
			}

			remainingLetters = secretWord.length;

			hangmanWordElement.innerHTML = answerArray.join(" ");
			guessesLeftElement.innerHTML = numGuessesLeft + " guesses left.";

		} // end function setupNewGame()


		function updateGameState()
		{
			if (remainingLetters > 0 && numGuessesLeft > 0)
			{

				if (letterGuess.length !== 1)
				{
					playerInfoElement.innerHTML = "Please enter a single letter";
				}
				else
				{
					alreadyGuessed = false;

					for (let i = 0; i < guessedArray.length; i++)
					{
						if (letterGuess === guessedArray[i])
						{
							alreadyGuessed = true;
							playerInfoElement.innerHTML = "That letter was already guessed!";
						}
					}
					if (!alreadyGuessed)
					{
						numGuessesLeft--;
						playerInfoElement.innerHTML = "no";

						guessedArray.push(letterGuess);
						for (let j = 0; j < secretWord.length; j++)
						{
							if (letterGuess === secretWord[j])
							{
								answerArray[j] = letterGuess;
								remainingLetters -= 1;
								playerInfoElement.innerHTML = "yes!";
							}
						}

						hangmanWordElement.innerHTML = answerArray.join(" ");
						guessesLeftElement.innerHTML = numGuessesLeft + " guesses left.";
					}
				}
			} // end if (remainingLetters > 0 && numGuessesLeft > 0)

			if (remainingLetters <= 0)
			{
				playerInfoElement.innerHTML = "Good job! The answer was <b>" + secretWord + "</b>. - Starting new game...";
				setTimeout(setupNewGame, 4000);
			}
			else if (numGuessesLeft == 0)
			{
				playerInfoElement.innerHTML = "Sorry, you're out of guesses. The answer was <b>" + secretWord + "</b>. - Starting new game...";
				setTimeout(setupNewGame, 4000);
			}


		} // end updateGameState()


	</script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Hangman</title>
	</head>

	<body>
	<h2>Hangman!</h2>

	<div id="hangmanWord"></div>
	<br>
	<div id="playerInfo"></div>
	<div id="guessesLeft"></div>
	<br>

	<label>Guess a letter: </label>
	<br>
	<input type="text" id="letterGuess" placeholder="enter a single letter">
	<br>
	<input type="submit" value="Submit" onclick="handleLetterGuess()">
	<br>
	<br>
	<label>Or, if you think you know the answer, guess the word:</label>
	<br>
	<input type="text" id="wordGuess" placeholder="enter the whole word">
	<br>
	<input type="submit" value="Submit" onclick="handleWordGuess()">
	(Warning: an incorrect word guess will end the game!)

	<script>

	let wordList = ["javascript", "monkey", "amazing", "pancake"];
	let secretWord;
	let answerArray = [];
	let guessedArray = [];
	let remainingLetters;
	let letterGuess, wordGuess;
	let alreadyGuessed = false;
	let numGuessesLeft = 10;
	let userQuit = false;
	let hangmanWordElement = document.getElementById("hangmanWord");
	let playerInfoElement = document.getElementById("playerInfo");
	let guessesLeftElement = document.getElementById("guessesLeft");
	let letterInputElement = document.getElementById("letterGuess");
	let wordInputElement = document.getElementById("wordGuess");


	setupNewGame();

	function handleLetterGuess()
	{
	letterGuess = letterInputElement.value.toLowerCase();
	letterInputElement.value = "";
	updateGameState();
	}

	function handleWordGuess()
	{
	wordGuess = wordInputElement.value.toLowerCase().trim();
	letterInputElement.value = "";
	wordInputElement.value = "";
	if (wordGuess === secretWord)
	playerInfoElement.innerHTML = "Good job! The answer was <b>" + secretWord + "</b>. - Starting new game...";
	else
	playerInfoElement.innerHTML = "Sorry, that's incorrect. The answer was <b>" + secretWord + "</b>. - Starting new game...";

	setTimeout(setupNewGame, 4000);
	}

	function setupNewGame()
	{
	playerInfoElement.innerHTML = "Good luck!";
	numGuessesLeft = 10;

	secretWord = wordList[Math.floor(Math.random() * wordList.length)];
	// clear out answerArray and guessedArray
	answerArray = [];
	guessedArray = [];

	for (let i = 0; i < secretWord.length; i++)
	{
	answerArray[i] = '_';
	}

	remainingLetters = secretWord.length;

	hangmanWordElement.innerHTML = answerArray.join(" ");
	guessesLeftElement.innerHTML = numGuessesLeft + " guesses left.";

	} // end function setupNewGame()


	function updateGameState()
	{
	if (remainingLetters > 0 && numGuessesLeft > 0)
	{

	if (letterGuess.length !== 1)
	{
	playerInfoElement.innerHTML = "Please enter a single letter";
	}
	else
	{
	alreadyGuessed = false;

	for (let i = 0; i < guessedArray.length; i++)
	{
	if (letterGuess === guessedArray[i])
	{
	alreadyGuessed = true;
	playerInfoElement.innerHTML = "That letter was already guessed!";
	}
	}
	if (!alreadyGuessed)
	{
	numGuessesLeft--;
	playerInfoElement.innerHTML = "no";

	guessedArray.push(letterGuess);
	for (let j = 0; j < secretWord.length; j++)
	{
	if (letterGuess === secretWord[j])
	{
	answerArray[j] = letterGuess;
	remainingLetters -= 1;
	playerInfoElement.innerHTML = "yes!";
	}
	}

	hangmanWordElement.innerHTML = answerArray.join(" ");
	guessesLeftElement.innerHTML = numGuessesLeft + " guesses left.";
	}
	}
	} // end if (remainingLetters > 0 && numGuessesLeft > 0)

	if (remainingLetters <= 0)
	{
	playerInfoElement.innerHTML = "Good job! The answer was <b>" + secretWord + "</b>. - Starting new game...";
	setTimeout(setupNewGame, 4000);
	}
	else if (numGuessesLeft == 0)
	{
	playerInfoElement.innerHTML = "Sorry, you're out of guesses. The answer was <b>" + secretWord + "</b>. - Starting new game...";
	setTimeout(setupNewGame, 4000);
	}


	} // end updateGameState()


	</script>
	</body>

	</html>