<html lang="en">
<head>
<title>Document</title>
<!--Google Font-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<!--Stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h3>I am thinking of a number between 1-100.</h3>
<h3>Can you guess it?</h3>
<input type="text" placeholder="Num" id="guess"><br>
<button onclick="play()" id="my_btn">GUESS</button>
<p id="message1">No. Of Guesses: 0</p>
<p id="message2">Guessed Numbers are: None</p>
<p id="message3"></p>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: linear-gradient(
to right,
#7f53ac,
#657ced
);
}
.container{
position: absolute;
width: 50%;
min-width: 580px;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
background-color: #ffffff;
padding: 50px 10px;
border-radius: 5px;
display: grid;
justify-items: center;
font-family: 'Poppins',sans-serif;
}
h3{
font-size: 16px;
font-weight: 600;
}
input[type="text"]{
width: 90px;
font-weight: 600;
color: #663399;
padding: 20px 0;
text-align: center;
margin-top: 30px;
border-radius: 5px;
border: 2px solid #202020;
font-size: 28px;
}
button{
width: 160px;
padding: 15px 0;
border-radius: 5px;
background-color: #663399;
color: #ffffff;
border: none;
font-size: 18px;
font-weight: 600;
margin-bottom: 30px;
outline: none;
}
p{
font-weight: 400;
}
var msg1 = document.getElementById("message1");
var msg2 = document.getElementById("message2");
var msg3 = document.getElementById("message3");
var answer = Math.floor(Math.random()*100) + 1;
var no_of_guesses = 0;
var guessed_nums = [];
function play(){
var user_guess = document.getElementById("guess").value;
if(user_guess < 1 || user_guess > 100){
alert("Please enter a number between 1 and 100.");
}
else{
guessed_nums.push(user_guess);
no_of_guesses+= 1;
if(user_guess < answer){
msg1.textContent = "Your guess is too low.";
msg2.textContent = "No. of guesses: " + no_of_guesses;
msg3.textContent = "Guessed numbers are: " +
guessed_nums;
}
else if(user_guess > answer){
msg1.textContent = "Your guess is too high.";
msg2.textContent = "No. of guesses: " + no_of_guesses;
msg3.textContent = "Guessed numbers are: " +
guessed_nums;
}
else if(user_guess == answer){
msg1.textContent = "Yippie You Win!!";
msg2.textContent = "The number was: " + answer;
msg3.textContent = "You guessed it in "+ no_of_guesses + " guesses";
document.getElementById("my_btn").disabled = true;
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.