Skip to content
Share
Explore
JavaScript Lab: Guessing Game CSD2103
Learning Outcome:
Write an HTML file and corresponding javascript file to make a number guessing game between human user and computer.
Use CSS to Style your Page.
Starter:
An HTML file and a corresponding JavaScript file to create a simple number guessing game. The computer will generate a random number between 1 and 100, and the user will try to guess the number.
Create an HTML file, index.html, with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Guessing Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Number Guessing Game</h1>
<p>Try to guess the number between 1 and 100:</p>
<input type="number" id="userGuess" min="1" max="100">
<button id="submitGuess">Submit Guess</button>
<p id="message"></p>
<script src="script.js"></script>
</body>
</html>
Next, create a JavaScript file, script.js, with the following content:
javascript
Copy code
document.getElementById('submitGuess').addEventListener('click', function () {
const randomNumber = Math.floor(Math.random() * 100) + 1;
const userGuess = parseInt(document.getElementById('userGuess').value);
let message;
if (userGuess < 1 || userGuess > 100) {
message = 'Invalid input. Please enter a number between 1 and 100.';
} else if (userGuess === randomNumber) {
message = 'Congratulations! You guessed the correct number!';
} else if (userGuess < randomNumber) {
message = 'Your guess is too low. The correct number was ' + randomNumber + '.';
} else {
message = 'Your guess is too high. The correct number was ' + randomNumber + '.';
}
document.getElementById('message').textContent = message;
});
This code will create a simple number guessing game where the user can input a number and click the "Submit Guess" button. The script will generate a random number between 1 and 100 and compare it with the user's guess. The result will be displayed as a message below the button.
You can also create an optional CSS file, style.css, to style the game:
css
Copy code
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
padding: 50px;
}
input[type="number"] {
width: 50px;
text-align: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 5px 15px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
This CSS file will style the game with a simple design and make the "Submit Guess" button change color when hovered.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.