<![CDATA[<!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 | Learn With Arshyan</title>
<style>
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #dde7f0, #f0f3fa);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Main container */
.game-container {
background: #e0e5ec;
padding: 40px 30px;
border-radius: 25px;
box-shadow: 10px 10px 30px #bec4d0, -10px -10px 30px #ffffff;
max-width: 400px;
width: 100%;
text-align: center;
}
/* Headings */
h1 {
font-size: 26px;
color: #3a3a3a;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: #555;
margin-bottom: 15px;
}
/* Input field */
input[type="number"] {
width: 100%;
padding: 14px;
font-size: 16px;
border: none;
border-radius: 12px;
background: #e0e5ec;
box-shadow: inset 6px 6px 10px #bec4d0, inset -6px -6px 10px #ffffff;
color: #333;
margin-top: 10px;
}
/* Buttons */
button {
margin-top: 20px;
width: 100%;
padding: 14px;
border: none;
border-radius: 12px;
background: #4a90e2;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1);
}
button:hover {
background: #357ac9;
}
/* Restart button */
#restart {
background: #f44336;
display: none;
}
#restart:hover {
background: #c62828;
}
/* Feedback display */
.result {
margin-top: 20px;
}
</style>
</head>
<body>
<!-- Game Container -->
<div class="game-container">
<h1>Guess The Number</h1>
<div class='code-block code-block-2' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2094722033678002"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-2094722033678002"
data-ad-slot="2248279416"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p>I'm thinking of a number between <strong>1 and 100</strong></p>
<!-- Input for user's guess -->
<input type="number" id="userGuess" placeholder="Enter your guess" min="1" max="100" />
<!-- Button to submit the guess -->
<button onclick="checkGuess()">Submit Guess</button>
<!-- Feedback & attempts display -->
<div class="result">
<p id="feedback">Start guessing...</p>
<p id="attempts">Attempts Left: 10</p>
</div>
<!-- Restart button (hidden by default) -->
<button id="restart" onclick="restartGame()">Restart</button>
</div>
<!-- JavaScript file -->
<script>
// Generate a random number between 1 and 100
let randomNumber = Math.floor(Math.random() * 100) + 1;
// Set max attempts
let attempts = 10;
// Function to check user's guess
function checkGuess() {
const userGuess = parseInt(document.getElementById('userGuess').value);
const feedback = document.getElementById('feedback');
const attemptsDisplay = document.getElementById('attempts');
// Validate input
if (!userGuess || userGuess < 1 || userGuess > 100) {
feedback.textContent = 'Please enter a number between 1 and 100.';
return;
}
// Check if guess is correct
if (userGuess === randomNumber) {
feedback.textContent = 'Congratulations! You guessed the correct number!';
document.getElementById('restart').style.display = 'block';
} else {
// Decrease attempts
attempts--;
if (attempts > 0) {
feedback.textContent = userGuess > randomNumber ? 'Too high! Try again.' : 'Too low! Try again.';
attemptsDisplay.textContent = `Attempts Left: ${attempts}`;
} else {
// Game over
feedback.textContent = `Game Over. The correct number was ${randomNumber}.`;
attemptsDisplay.textContent = 'Attempts Left: 0';
document.getElementById('restart').style.display = 'block';
}
}
// Clear input
document.getElementById('userGuess').value = '';
}
// Restart the game
function restartGame() {
randomNumber = Math.floor(Math.random() * 100) + 1;
attempts = 10;
document.getElementById('feedback').textContent = 'Start guessing...';
document.getElementById('attempts').textContent = 'Attempts Left: 10';
document.getElementById('restart').style.display = 'none';
}
</script>
</body>
</html>
]]>
