Back to Projects Intermediate

Guess The Number

The computer picks a secret number between 1-100. You guess, and get 'too high' or 'too low' hints until you find it. Great for learning game logic!

HTML, CSS, JavaScript ~1-2 hours to build Free source code

What You'll Learn

How to generate a random integer with Math.floor(Math.random() * 100) + 1
How to compare values and give conditional feedback with if/else
How to count and display the number of attempts
How to show and hide game elements based on win state
How to restart a game by resetting all state variables

How It Works

The computer picks a secret number

At the start, Math.floor(Math.random() * 100) + 1 gives a random whole number between 1 and 100. This is stored as the 'secret' — the user can't see it.

Each guess gets a hint

We compare the guess to the secret. Too high? Say so. Too low? Say so. Exact match? You win! The comparison uses simple if/else logic.

Track attempts

We increment a counter each time the user guesses. When they win, we show how many tries it took. Fewer tries = more impressive!

Source Code

HTML Structure

HTML

<!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="stylesheet" href="style.css">
</head>
<body>
  <div class="game-card">
    <h1>🎲 Guess The Number</h1>
    <p class="subtitle">I'm thinking of a number between <strong>1</strong> and <strong>100</strong></p>
    <div class="input-row">
      <input type="number" id="guessInput" placeholder="Your guess..." min="1" max="100">
      <button id="guessBtn">Guess!</button>
    </div>
    <div id="message" class="message"></div>
    <div id="attempts" class="attempts"></div>
    <button id="restartBtn" class="hidden">Play Again</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

CSS

* { margin:0; padding:0; box-sizing:border-box; }
body { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0d3b8a,#2980b9); font-family:'Segoe UI',sans-serif; padding:20px; }
.game-card { background:white; border-radius:24px; padding:40px; width:100%; max-width:400px;
  text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
h1 { font-size:2rem; font-weight:800; color:#25265e; margin-bottom:12px; }
.subtitle { color:#666; margin-bottom:28px; font-size:0.95rem; }
.input-row { display:flex; gap:10px; margin-bottom:20px; }
#guessInput { flex:1; padding:14px; border:2px solid #e0e0e0; border-radius:10px;
  font-size:1.1rem; text-align:center; outline:none; font-weight:700; transition:border-color 0.2s; }
#guessInput:focus { border-color:#2980b9; }
#guessBtn { padding:14px 20px; background:#2980b9; color:white; border:none; border-radius:10px;
  font-weight:700; font-size:1rem; cursor:pointer; white-space:nowrap; }
#guessBtn:hover { background:#1f6aa5; }
.message { font-size:1.1rem; font-weight:700; min-height:40px; margin-bottom:12px;
  padding:10px; border-radius:8px; }
.message.high { color:#e74c3c; background:#fee8e8; }
.message.low { color:#2980b9; background:#eef4ff; }
.message.win { color:#27ae60; background:#e8f8ee; font-size:1.2rem; }
.attempts { color:#888; font-size:0.9rem; margin-bottom:20px; }
#restartBtn { padding:12px 32px; background:#25265e; color:white; border:none;
  border-radius:50px; font-weight:700; font-size:1rem; cursor:pointer; }
#restartBtn:hover { background:#1a1b4b; }
.hidden { display:none !important; }

JavaScript Logic

JavaScript

let secretNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
let gameOver = false;

document.getElementById('guessBtn').addEventListener('click', makeGuess);
document.getElementById('guessInput').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') makeGuess();
});

function makeGuess() {
  if (gameOver) return;
  const input = document.getElementById('guessInput');
  const guess = parseInt(input.value);
  const message = document.getElementById('message');

  if (!guess || guess < 1 || guess > 100) {
    message.textContent = 'Enter a number between 1 and 100';
    message.className = 'message high';
    return;
  }

  attempts++;
  document.getElementById('attempts').textContent = `Attempts: ${attempts}`;

  if (guess > secretNumber) {
    message.textContent = '📈 Too high! Try lower.';
    message.className = 'message high';
  } else if (guess < secretNumber) {
    message.textContent = '📉 Too low! Try higher.';
    message.className = 'message low';
  } else {
    message.textContent = `🎉 You got it in ${attempts} ${attempts === 1 ? 'try' : 'tries'}!`;
    message.className = 'message win';
    gameOver = true;
    document.getElementById('guessBtn').disabled = true;
    document.getElementById('restartBtn').classList.remove('hidden');
  }
  input.value = '';
  input.focus();
}

document.getElementById('restartBtn').addEventListener('click', () => {
  secretNumber = Math.floor(Math.random() * 100) + 1;
  attempts = 0; gameOver = false;
  document.getElementById('message').textContent = '';
  document.getElementById('message').className = 'message';
  document.getElementById('attempts').textContent = '';
  document.getElementById('guessBtn').disabled = false;
  document.getElementById('restartBtn').classList.add('hidden');
  document.getElementById('guessInput').focus();
});