Number guessing game javascript | number guess game javascript game







 Number guessing game javascript |Number guess game





Welcome🎉 to Code With Random blog. In this blog, we will discuss how to create a number guessing game. 


For this project, we will use HTML, CSS, and basic Vanilla Javascript. So a basic understanding of these technologies is all you need to get started.

HTML code for the number guessing game

Write the HTML boilerplate and link it with the external CSS file. For this project, we are using google font “Poppins” and thus add a link tag for the google fonts inside <head> element.

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</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 Guesss : 0</p>
<p id="message2">Guessed number are : none</p>
<p id="message3"></p>
</div>
<script src="app.js"></script>
</body>
</html>


Create following div container and add the code inside body tag. 

<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 Guesss : 0</p>  
       <p id=”message2″>Guessed number are : none</p>  
       <p id=”message3″></p>  
   </div> 


This HTML code provides the basic structure for the number guessing game.


number guessing game javascript | number guess game javascript game

Style it with CSS

Next, we will style our project and make it presentable using CSS.

Style the background and root element to make the default padding and margin to be zero, and the box to be governed by the border-box. Center the container element in the webpage.

 *{  
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: #fff;
padding: 50px 10px;
border-radius: 5px;
display: grid;
justify-items: center;
font-family: 'poppins', sans-serif;
}

Next, we are styling the element inside the container, to make the user interface more engaging.

 h3{  
font-size: 30px;
font-weight: 600;
}
input[type="text"]{
width: 90px;
font-weight: 600;
padding: 20px 0;
font-size: 28px;
text-align: center;
margin-top: 30px;
border-radius: 5px;
border: 2px solid #202020;
color: #663399;
}
button{
width: 160px;
padding: 15px 0;
border-radius: 5px;
background-color: #663399;
color: #fff;
border: none;
font-size: 18px;
font-weight: 600;
margin-bottom: 30px;
}
p{
font-weight: 400;
}

Here is our updated output after CSS.

number guessing game javascript | number guess game javascript game

Add functionality using Javascript 

Next, we are adding functionality to our number guessing game. 

 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 guesses_num = [];
function play(){
var user_guess = document.getElementById("guess").value;
if(user_guess < 1 || user_guess > 100 ){
alert("Please Enter a number Between 1 to 100");
}
else{
guesses_num.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 Number Are: " +
guesses_num;
}
else if(user_guess > answer){
msg1.textContent = "Your Guess is Too High"
msg2.textContent = "No. Of Guesses : " +
no_of_guesses;
msg3.textContent = "Guessed Number Are: " +
guesses_num;
}
else if(user_guess == answer){
msg1.textContent = "Yahhhh You won It!!"
msg2.textContent = "the Number was " + answer
msg3.textContent = " You guessd it in " + no_of_guesses +"Guesses";
}
}
}


Now we have completed our javascript section,  Here is our updated output with javascript You can see output video and project screenshots. 


number guessing game javascript output

Javascript number guessing game output

Conclusion

Hope you like the number guessing game.
In this post, we learned how to create a number guessing game using simple HTML & CSS, and javascript. If we made a mistake or for any confusion, please drop a comment to help our readers and make the process easy for all of us.

See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

Check it more

javascript project ideas with source code  by Code With Random

HTML – CSS project ideas by Code With Random

calculator Html javascript | calculator javascript code

bootstrap navbar – responsive  bootstrap navbar 

notification CSS style | Html top bar slide down notification CSS

CSS responsive menu | CSS animated Menu

countdown timer HTML javascript | free countdown timer

A Custom checkbox in CSS? | Create a custom checkbox using CSS?

Written by – Code With Random/Anki 

Share on:

Leave a Comment