examples/JavaScript/number-guessing-game.html at master · sromanowski12/examples · GitHub

History

118 lines (101 loc) · 3.34 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<html>

<head>

<title>Number guessing game</title>

<style>

html {

font-family: sans-serif;

}

body {

width: 50%;

max-width: 800px;

min-width: 480px;

margin: 0 auto;

}

.lastResult {

color: white;

padding: 3px;

}

</style>

</head>

<body>

<h1>Number guessing game</h1>

<p>

We have selected a random number between 1 and 100. See if you can guess

it in 10 turns or fewer. We'll tell you if your guess was too high or too

low.

</p>

<label for="guessField">Enter a guess: </label>

</div>

</div>

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector(".guesses");

const lastResult = document.querySelector(".lastResult");

const lowOrHi = document.querySelector(".lowOrHi");

const guessSubmit = document.querySelector(".guessSubmit");

const guessField = document.querySelector(".guessField");

let guessCount = 1;

let resetButton;

function checkGuess() {

let userGuess = Number(guessField.value);

if (guessCount === 1) {

guesses.textContent = "Previous guesses: ";

}

guesses.textContent += userGuess + " ";

if (userGuess === randomNumber) {

lastResult.textContent = "Congratulations! You got it right!";

lastResult.style.backgroundColor = "green";

lowOrHi.textContent = "";

setGameOver();

} else if (guessCount === 10) {

lastResult.textContent = "!!!GAME OVER!!!";

lowOrHi.textContent = "";

setGameOver();

} else {

lastResult.textContent = "Wrong!";

lastResult.style.backgroundColor = "red";

if (userGuess < randomNumber) {

lowOrHi.textContent = "Last guess was too low!";

} else if (userGuess > randomNumber) {

lowOrHi.textContent = "Last guess was too high!";

}

guessCount++;

guessField.value = "";

guessField.focus();

}

guessSubmit.addEventListener("click", checkGuess);

function setGameOver() {

guessField.disabled = true;

guessSubmit.disabled = true;

resetButton = document.createElement("button");

resetButton.textContent = "Start new game";

document.body.appendChild(resetButton);

resetButton.addEventListener("click", resetGame);

}

function resetGame() {

guessCount = 1;

const resetParas = document.querySelectorAll(".resultParas p");

for (let i = 0; i < resetParas.length; i++) {

resetParas[i].textContent = "";

}

resetButton.parentNode.removeChild(resetButton);

guessField.disabled = false;

guessSubmit.disabled = false;

guessField.value = "";

guessField.focus();

lastResult.style.backgroundColor = "white";

randomNumber = Math.floor(Math.random() * 100) + 1;

}

</script>

</body>

</html>

examples/JavaScript/number-guessing-game.html at master · sromanowski12/examples · GitHub

Expand file tree

Breadcrumbs

number-guessing-game.html

Latest commit

History

Breadcrumbs

number-guessing-game.html

File metadata and controls