This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/guess_the_number.htm
I saw the video of it yesterday again. It was fun to watch. I’m glad you used vanilla js! Kudos to you for this. The colors are good too.
2 Likes
Vanilla HTML/CSS/JS for life! 
(Yes, this will make an upcoming revision of my Learning React book a bit inconsistent with what I’ve just said haha)
2 Likes
Point and click (Mouse for life!)
function rebuild(root, count) {
const delay = 25
const duration = 750
let attempts = 0
const target = Math.floor(Math.random() * count)
const buttons = Array.from({ length: count }, (_, i) => {
const button = document.createElement("button")
button.textContent = i
button.onclick = () => {
attempts++
if (i === target) {
alert(`Correct! The number was ${target}! It took you ${attempts} attempt${attempts === 1 ? '!' : 's.'}`)
rebuild(root, count)
return
}
const [end, inc] = i < target ? [-1, -1] : [count, 1]
for (let j = i; j !== end; j += inc) {
Object.assign(buttons[j].style, {
scale: 0,
transition: `scale ${duration}ms cubic-bezier(0.3, -0.7, 1, 0.4) ${Math.abs(j - i)*delay}ms`,
pointerEvents: "none"
})
}
}
return button
})
root.replaceChildren(...buttons)
root.style.gridTemplateColumns = `repeat(${Math.round(Math.sqrt(count))}, 1fr)`
}
const root = document.body.appendChild(document.createElement("main"))
Object.assign(root.style, {
display: "grid",
overflow: "hidden",
position: "absolute",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
})
rebuild(root, 100)
The lack of semicolons at end of each statement scares me! 
Yeah I kinda go back and forth (don’t have them here, but did in the konami code exercise). I think I tend to default to not including them, especially on simpler things.
1 Like
And…the badge is yours congrats! There are a bunch more if you are up for trying them all 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess the Number</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<style>
body {
background-color: yellow;
color: magenta;
font-family: 'Indie Flower', cursive;
letter-spacing: 3px;
word-spacing: 5px;
}
h1 {
font-size: 4em;
text-shadow: 0 0 10px cyan;
}
h2 {
font-size: 2em;
text-shadow: 0 0 10px cyan;
}
h2 + p {
font-size: 1.5em;
width: 60%;
}
input {
border: 3px solid magenta;
border-radius: 10px;
padding: 5px;
height: 30px;
width: 200px;
font-size: 1.2rem;
background-color: lemonchiffon;
}
button {
border: 3px solid magenta;
background-color: #823db8;
color: magenta;
border-radius: 10px;
padding: 10px;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 2px;
}
.boxshadow {
-moz-box-shadow:4px 4px 4px 4px #D0D0D0;
-webkit-box-shadow:4px 4px 4px 4px #D0D0D0;
box-shadow:4px 4px 4px 4px #D0D0D0;
}
button:hover {
background-color: #bb71f1;
color: cyan;
border: 3px solid cyan;
}
button:active {
background-color: #4b0082;
color: magenta;
border: 3px solid magenta;
}
#message {
font-size: 1.5rem;
font-weight: bold;
padding: 20px;
background-color: cyan;
border: 3px solid magenta;
border-radius: 10px;
width: 40%;
box-shadow: 0 0 10px 0 magenta;
}
</style>
</head>
<body>
<center>
<h1>Guess the Number</h1>
<h2>Instructions:</h2>
<p>Guess a number between 1 - 100. You will get ten chances to guess the correct number.</p>
<br>
<form>
<input id="guessInput" class="boxshadow" type="number" name="guess" placeholder="Enter your guess">
<button id="guessBtn" class="boxshadow" type="submit">Guess</button>
</form>
<p id="message"></p>
</center>
<script>
// make the result tag hidden until the user clicks the button
document.getElementById("message").style.visibility = "hidden";
// generate a random number between 1 - 100
let randomNumber = Math.floor(Math.random() * 100) + 1;
console.log(randomNumber);
// get the user's guess
let guessInput = document.getElementById("guessInput");
let guessBtn = document.getElementById("guessBtn");
let message = document.getElementById("message");
let guessCount = 0;
let guessLimit = 10;
let outOfGuesses = false;
guessBtn.addEventListener("click", function(e) {
e.preventDefault();
let guess = parseInt(guessInput.value);
guessCount++;
if (guessCount <= guessLimit) {
if (guess === randomNumber) {
message.style.visibility = "visible";
message.innerHTML = "Congratulations! You guessed the correct number!";
message.style.color = "green";
guessInput.disabled = true;
guessBtn.disabled = true;
} else if (guess < randomNumber) {
message.style.visibility = "visible";
message.innerHTML = "Your guess is too low. Try again.";
message.style.color = "red";
} else if (guess > randomNumber) {
message.style.visibility = "visible";
message.innerHTML = "Your guess is too high. Try again.";
message.style.color = "red";
}
} else {
message.style.visibility = "visible";
message.innerHTML = "Sorry, you are out of guesses. The correct number was " + randomNumber + ".";
message.style.color = "red";
guessInput.disabled = true;
guessBtn.disabled = true;
}
});
</script>
</body>
</html>
Badge granted!