JavaScript Tutorial in Hindi #28 | JavaScript Project-1 (2025)

PROJECT #1: Guess My Number!

Game Rules Recap:

  1. Browser generates a random number between 1 and 20.
  2. User inputs their guess.
  3. Show hints if guess is too high or too low.
  4. Show success message and change background color if correct.
  5. Track current score and high score.

Step-by-Step Plan:

  1. Generate a random secret number between 1 and 20.
  2. Initialize score (start at 20).
  3. Initialize high score (start at 0).
  4. Listen to user input (a button click or form submission).
  5. Compare guess with secret number:
  6. If no input: show "No number!"
  7. If guess too high: show "Too high!"
  8. If guess too low: show "Too low!"
  9. If correct: show success message, change background, update high score.
  10. Deduct score by 1 for each wrong guess.
  11. If score reaches 0, show "You lost!" message.
  12. Provide a "Play Again" button to reset the game.

Complete HTML + CSS + JS Example:

html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Guess My Number!</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #222;
color: #eee;
text-align: center;
margin: 50px;
}
.number {
font-size: 6rem;
width: 150px;
margin: 20px auto;
padding: 20px;
border: 5px solid #eee;
border-radius: 10px;
background-color: #444;
}
input[type="number"] {
padding: 10px;
font-size: 1.5rem;
width: 100px;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 1.2rem;
cursor: pointer;
}
.message {
font-size: 2rem;
margin: 20px 0;
}
.score, .highscore {
font-size: 1.5rem;
margin: 10px;
}
</style>
</head>
<body>

<h1>Guess My Number!</h1>
<p class="message">Start guessing...</p>
<div class="number">?</div>
<input type="number" min="1" max="20" class="guess" />
<button class="check">Check!</button>
<button class="again">Play Again</button>

<p class="score">Score: 20</p>
<p class="highscore">Highscore: 0</p>

<script>
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

const messageEl = document.querySelector('.message');
const numberEl = document.querySelector('.number');
const scoreEl = document.querySelector('.score');
const highscoreEl = document.querySelector('.highscore');
const guessInput = document.querySelector('.guess');
const body = document.body;

function displayMessage(message) {
messageEl.textContent = message;
}

document.querySelector('.check').addEventListener('click', () => {
const guess = Number(guessInput.value);

if (!guess) {
displayMessage('⛔ No number!');
return;
}

if (guess === secretNumber) {
displayMessage('🎉 Correct Number!');
numberEl.textContent = secretNumber;
body.style.backgroundColor = '#60b347';

if (score > highscore) {
highscore = score;
highscoreEl.textContent = 'Highscore: ' + highscore;
}
} else {
if (score > 1) {
displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!');
score--;
scoreEl.textContent = 'Score: ' + score;
} else {
displayMessage('💥 You lost the game!');
scoreEl.textContent = 'Score: 0';
numberEl.textContent = secretNumber;
body.style.backgroundColor = '#b34747';
}
}
});

document.querySelector('.again').addEventListener('click', () => {
score = 20;
secretNumber = Math.trunc(Math.random() * 20) + 1;
displayMessage('Start guessing...');
scoreEl.textContent = 'Score: ' + score;
numberEl.textContent = '?';
guessInput.value = '';
body.style.backgroundColor = '#222';
});
</script>

</body>
</html>

How to Use This Code:

  1. Save as index.html.
  2. Open in any modern browser.
  3. Input your guess (1-20) and click "Check!".
  4. Try to guess the secret number with hints.
  5. Click "Play Again" to reset the game.