Create Number Guessing Game Javascript (Complete Sourcecode)

Create Number Guessing Game Javascript (Complete Sourcecode)

Welcome to The codewithrandom blog. In this article, we create a number guessing game using javascript.

For the number guessing game project, we will use html, css, and basic vanilla javascript. So a basic understanding of these technologies is all you need to get started.

Number Guessing Game Html Code

Write the html boilerplate and link it with the external css file.

100+ Front-end Projects for Web developers (Source Code)

For this project, we are using google font “Poppins” and thus add a link tag for the google fonts inside the <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 the following div container and add the code inside the body tag for number guessing game .
<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 CSS

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

50+ Front-end Projects With Source Code | Front-end Projects With Source Code

Style the background and root element to make the default padding and margin to be zero, and the box 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.

Ecommerce Website Using Html Css And Javascript | E-commerce Website ( Source Code)

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 for the number guessing game.

Html Css number guessing game Output

 

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

Javascript Code 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 for the number guessing game.  Here is our updated output with html, css, and javascript for the number guessing game.

You can see the output video and project screenshots of the number guessing game.

 

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

 

10+ Javascript Project Ideas For Beginners( Project Source Code)

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

Written by – Code With Random/Anki

Share on:

Leave a Comment