JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Guessing Game</h1>
<p>Type in a number between 1 and 100 and I will tell you if it is too high or low.</p>
<form>
<label for="guessField">Enter a guess: </label>
<input type="text" id="guessField" class="guessField"/>
<input type="button" value="Submit Guess" class="guessSubmit"/>
</form>
<div class='resultParas'>
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
JavaScript
/**
* These are references to DOM nodes. You don't have to updates these in the functions below.
*/
var guessField = document.querySelector('.guessField');
var guessSubmit = document.querySelector('.guessSubmit');
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
/**
* These are variables that need to be updated every time you reset the game, but also have to be initialized.
*/
var randNum;
var guessCount;
var userGuess;
var lastUserGuess;
function init() {
/**
* Reset the random number every time you click the reset button
*/
randNum = Math.floor(Math.random() * 100) + 1;
guessCount = 1;
userGuess = Number(guessField.value);
lastUserGuess = -1;
}
/**
* Call the init function and set the variables!
*/
init();
function checkGuess() {
/**
* Important! Update the userGuess variable every time you call checkGuess().
* Notice that userGuess has been defined outside of this function. If you would have
* defined let userGuess here it would have been local.
*/
userGuess= Number(guessField.value);
if(guessCount === 1) {
guesses.textContent = "Previous Guesses: ";
}
guesses.textContent += userGuess + ' ';
if(userGuess === randNum) {
showWin();
} else if(guessCount === 10) {
showLoss();
} else {
showError();
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function showWin() {
lastResult.textContent = 'You won nice job schmuck';
lastResult.style.backgroundColor = 'green';
gameOver();
}
function showError() {
lastResult.textContent = 'Sorry, wrong guess';
if(userGuess > randNum) {
lowOrHi.textContent = 'Your guess was too high';
} else if(userGuess < randNum) {
lowOrHi.textContent = 'Your guess was too low';
}
}
function showLoss() {
lastResult.textContent = 'You lost, you schmuck';
...