<!DOCTYPE html>
<html>
<head>
<title>Number Guessing Game</title>
<style>
body{
margin:0;
font-family:Arial;
background:#08111f;
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.box{
width:320px;
padding:30px;
text-align:center;
border-radius:20px;
background:#101d32;
box-shadow:0 0 30px #00eaff55;
}
h1{color:#00eaff;}
input{
width:90%;
padding:12px;
border-radius:10px;
border:0;
margin:10px;
font-size:18px;
}
button{
padding:12px 25px;
border:0;
border-radius:20px;
background:#00eaff;
font-weight:bold;
cursor:pointer;
}
#msg{
margin-top:20px;
font-size:18px;
}
</style>
</head>
<body>
<div class="box">
<h1>🎯 Guess The Number</h1>
<p>Guess a number between 1 and 100</p>
<input id="guess" type="number" placeholder="Enter number">
<button onclick="check()">GUESS</button>
<p id="msg"></p>
<p>Attempts: <span id="attempts">0</span></p>
</div>
<script>
let number=Math.floor(Math.random()*100)+1;
let attempts=0;
function check(){
let guess=Number(document.getElementById("guess").value);
if(!guess){
document.getElementById("msg").textContent="⚠️ Enter a number!";
return;
}
attempts++;
document.getElementById("attempts").textContent=attempts;
if(guess===number){
document.getElementById("msg").textContent=
"🎉 Correct! You won!";
}else if(guess<number){
document.getElementById("msg").textContent=
"⬆️ Try a higher number";
}else{
document.getElementById("msg").textContent=
"⬇️ Try a lower number";
}
}
</script>
</body>
</html>
<html>
<head>
<title>Number Guessing Game</title>
<style>
body{
margin:0;
font-family:Arial;
background:#08111f;
color:white;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.box{
width:320px;
padding:30px;
text-align:center;
border-radius:20px;
background:#101d32;
box-shadow:0 0 30px #00eaff55;
}
h1{color:#00eaff;}
input{
width:90%;
padding:12px;
border-radius:10px;
border:0;
margin:10px;
font-size:18px;
}
button{
padding:12px 25px;
border:0;
border-radius:20px;
background:#00eaff;
font-weight:bold;
cursor:pointer;
}
#msg{
margin-top:20px;
font-size:18px;
}
</style>
</head>
<body>
<div class="box">
<h1>🎯 Guess The Number</h1>
<p>Guess a number between 1 and 100</p>
<input id="guess" type="number" placeholder="Enter number">
<button onclick="check()">GUESS</button>
<p id="msg"></p>
<p>Attempts: <span id="attempts">0</span></p>
</div>
<script>
let number=Math.floor(Math.random()*100)+1;
let attempts=0;
function check(){
let guess=Number(document.getElementById("guess").value);
if(!guess){
document.getElementById("msg").textContent="⚠️ Enter a number!";
return;
}
attempts++;
document.getElementById("attempts").textContent=attempts;
if(guess===number){
document.getElementById("msg").textContent=
"🎉 Correct! You won!";
}else if(guess<number){
document.getElementById("msg").textContent=
"⬆️ Try a higher number";
}else{
document.getElementById("msg").textContent=
"⬇️ Try a lower number";
}
}
</script>
</body>
</html>