Number Guessing Game Using JavaScript

Create Number Guessing Game Using JavaScript (Source Code)

Create Number Guessing Game Using JavaScript (Source Code)

Welcome to the CodeWithRandom blog. This blog teaches us how to create a Number Guessing Game. We use HTML for creating the structure of the Number Guessing Game and Use Css For Styling Number Guessing Game and finally Give Functionlity Using javascript for the Number Guessing Game.

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Number Guessing Game.

HTML Code For Number Guessing Game

<!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">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 
    <title>Guess Number</title>
    <link rel="stylesheet" href="style1.css">
</head>
<body>
    <main>
        <h1>Guess My Number</h1>
        <p id="header">I'm a number between 1 and 100</p>
        <h4># of times you've guessed:<p id="guesses"></p></h4>
        <form id="thegame" action="" method="get">
          <fieldset>
            <input type="text" pattern="\d*" id="guess" maxlength="3" />
            <input type="submit" value="Guess" />
          </fieldset>
        </form>
        <a href="#">New game</a>
      </main>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="app.js"></script>  
</body>
</html>

There is all the Html Code for the Number Guessing Game. Now, you can see output without Css and JavaScript. Then we write Css and JavaScript for the Number Guessing Game.

Only Html Code Output

Number Guessing Game Using JavaScript
Number Guessing Game Using JavaScript

CSS Code For Number Guessing Game

html, body {
  padding: 25px 0;
  margin: 0;
  font: normal 16px "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  color: #16997c;
  background: url("http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

main {
  display: block;
  max-width: 400px;
  min-width: 250px;
  padding: 20px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  main {
    width: 90%;
  }
}

h1 {
  color: #d35400;
}

fieldset {
  padding: 0 0 25px 0;
  margin: 0;
  border: none;
}

input[type="text"] {
  width: 40px;
  height: 40px;
  padding: 10px;
  margin: 0 0 20px 0;
  font: normal 20px "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  border: none;
  box-sizing: border-box;
}

input[type="submit"] {
  display: block;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding: 15px 0;
  font: normal 20px Helvetica, Arial, sans-serif;
  color: #ffffff;
  text-shadow: 1px 1px 5px rgba(80, 80, 80, .8);
  border: none;
  background: linear-gradient(to bottom, #f39c12 0%, #d35400 100%);
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
}

a { 
  color: #d35400; 
  font-size: 1.4em;
  text-decoration: none;
  font-weight: bold;
}

#guess {
  width: 90px;
}

Portfolio Website using HTML and CSS (Source Code)

Html + Css Code Outout 

Number Guessing Game Using JavaScript
Number Guessing Game Using JavaScript

JavaScript Code For Number Guessing Game

$(document).ready(function() {
  
  var answer = Math.floor(Math.random() * 100) + 1;
  console.log(answer);

  var guess_count = 0;
  console.log(guess_count);

  // on submit even for the guess
  $("form").on("submit", function(e) {
    e.preventDefault();

    var guess = +$("input#guess").val();
    console.log(guess);

    guess_count++;
    
   
    $("#guesses").text(guess_count);
    
    // comparisons to see if guess is right
    if (guess > answer) {
      var high_message = "My number is less than " + guess;
      $("#header").text(high_message);

    } else if (guess < answer) {
      var low_message = "My number is greater than " + guess;
      $("#header").text(low_message);
      
    } else {
      var congrat_message = "Congratulations " + guess + " is the number";
      $("#header").text(congrat_message);
      
    }
  });
  
  $("input:text").focus(function(){$(this).val("")});

  // on click event to reset the game
  $("a").on("click", function(e) {
    e.preventDefault();

    answer = Math.floor(Math.random() * 100) + 1;
    $("p").text("Guess a number from 1 to 100");
    console.log(answer);
    guess_count = 0;
  })

});

50+ Html ,Css & Javascript Projects With Source Code

Final Output Of Number Guessing Game Using JavaScript

Number Guessing Game Using JavaScript
Number Guessing Game Using JavaScript
Number Guessing Game Using JavaScript
Number Guessing Game Using JavaScript

Live Preview Of Number Guessing Game Using JavaScript

 

Now that we have completed our Number Guessing Game Using JavaScript.Our updated output with Html,Css and JavaScript. Hope you like the Number Guessing Game. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Ecommerce Website Using Html Css And Javascript Source Code

Thank you!

This post teaches us how to create a Number Guessing Game Using Html, Css, And JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki

Code By – Luke Genco



Tags: ,

Leave a Reply