Building your first interactive program is an exciting milestone! In this project, we are going to build a classic Number Guessing Game. By combining several foundational concepts—variables, conditionals, loops, functions, and user input—you will see how individual pieces of syntax come together to form a complete software application.
Before writing code, it is crucial to understand the high-level architecture of our game. Software engineering is largely about breaking a large problem down into smaller, solvable steps.
Our architecture outlines three major phases. We must generate a secret answer, enter a loop that continually asks the user for their guess, and check whether that guess is the winner. Let’s break down each technical requirement.
First, the game needs a secret number. While some languages offer a native integer generator, JavaScript provides a single uniform random generator: Math.random(). This method returns a floating-point (decimal) number between 0 (inclusive) and 1 (exclusive).
Why a decimal instead of a whole number? Because returning a uniform decimal between 0 and 1 allows developers to scale the randomness to any arbitrary range they need.
console.log(Math.random() >= 0 && Math.random() < 1);true
To make this a whole number between 1 and 10, we simply scale it up by multiplying by 10, and chop off the remaining decimals using Math.floor(). Adding 1 shifts our range from 0–9 up to 1–10.
console.log(Math.floor(Math.random() * 10) < 10);true
When a user types a guess into a web prompt, it usually comes back as a string, like '5'. Even though it looks like a number to human eyes, JavaScript sees it as a text character. To compare it properly against our generated secret integer, we must parse the string into a real number.
The parseInt() function is designed exactly for this. Many beginners assume that providing text containing letters will crash the program. However, parseInt() evaluates characters from left to right, stopping as soon as it encounters a non-numeric character. This is why parsing values like '10px' successfully extracts the number 10 before ignoring the letters.
Read the code. What exactly will it print? Commit to an answer before you look.
console.log(parseInt('42px', 10));42
We need to keep asking the user for a guess until they get it right. Why use a while loop instead of a for loop? A for loop is ideal when you know the exact iteration count in advance (like iterating through a fixed array). However, in a guessing game, we don’t know how many guesses the user will need! A while loop runs indefinitely, re-evaluating its condition on every pass until the condition is met.
let i = 0;
while(i < 3) {
i++;
}
console.log(i);3Inside our loop, we use an if statement to evaluate whether the user’s parsed guess strictly matches the secret target. If it does, we break out of the loop and declare a victory.
const guess = 5;
const target = 5;
if (guess === target) {
console.log('Win');
}Win
By assembling these foundational structures, you can build a fully functional, interactive JavaScript application!
What is the result of parseInt('10px', 10)?
10 — parseInt parses characters until it hits a non-numeric character, so '10px' becomes 10.
Does a while loop always execute at least once?
No, if the condition is initially false, it never runs. — A while loop evaluates the condition before running the body, so it may run zero times.
What type of value does prompt() return?
String — prompt() always returns a String (or null), which is why we must convert it before doing math comparisons.
Can Math.random() return exactly 1?
No, it is strictly less than 1. — Math.random() always returns a float between 0 (inclusive) and 1 (exclusive).
Generate a random integer between 1 and 10 (inclusive) and print it.
Multiply Math.random() by 10, floor it, then add 1.
const num = Math.floor(Math.random() * 10) + 1;
console.log(typeof num === 'number');Parse the string '55' to an integer and check if it equals 55.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Use parseInt()
const input = '55';
const parsed = parseInt(input, 10);
console.log(parsed === 55);