Build a Guess the Number Game in HTML5 CSS3 and Javascript Full Project For Beginners

Build a Guess the Number Game in HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a simple guess the number game in html5 css3 and javascript. All the full source code of the application is given below.

 

 

Get Started

 

 

Now make an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Guess the number</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header>
        <button class="again-btn">Again!</button>
        <p class="range">&ltA number between 1 and 20&gt</A></p>
        <h1 class="title">Guess my number!</h1>
        <hr>
        <div class="number">?</div>
    </header>
    <div class="stat">
        <p class="message">Message</p>
        <span class="score">Score: 20</span></br>
        <span class="record">Highest Record:</span></br>
        <input class="guess-number"type="text"></br>
        <button class="check-btn">Check!</button>
    </div>
  </body>
  <script src="./script.js"></script>
</html>

 

 

Now make style.css file and copy paste the following code

 

style.css

 

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  font-family: 'Press Start 2P', sans-serif;
  color: #eee;
  background-color: rgb(20, 20, 20, 0.9);
}

button {
  background-color: #eee;
  border: none;
  font-family: 'Press Start 2P';
  font-size: 16px;
  padding: 20px;
}

hr {
  margin-top: 10%;
  height: 0.5em;
  background-color: #eee;
}

.title {
  text-align: center;
}

.range {
  font-size: 0.7em;
  margin-left: 65%;
  width: 40%;
}

.number {
  margin: auto;
  color: rgb(20, 20, 20, 0.9);
  font-size: 3em;
  text-align: center;
  background-color: #eee;
  padding: 25px;
  width: 10%;
  margin-top: -6%;
}

.check-btn {
  text-align: center;
  margin-top: 1em;
  margin-left: 26%;
}

.message {
  font-size: 1.5em;
  text-align: center;
}

.score {
  margin-top: 25%;
  margin-left: 65%;
}

.record {
  margin-top: 35%;
  margin-left: 65%;
}

.guess-number {
  margin-top: 5%;
  margin-left: 25%;
  height: 2em;
  width: 2em;
  font-size: 5em;
  padding: 0px;
  background-color: rgb(20, 20, 20, 0.9);
  color: #eee;
  font-family: 'Press Start 2P';
}

 

See also  Build a Celsius + Fahrenheit Temperature Converter in Node.js Using celsius Library in Javascript Full Project For Beginners

 

Now make an script.js file and copy paste the following code

 

script.js

 

let secretNumber = 20;
let score = 20;
let highestRecord = 0;

document.addEventListener('DOMContentLoaded', function (event) {
  document.querySelector('.score').textContent = 'Score: ' + score;
  document.querySelector('.message').textContent = 'Guess the number!';
  secretNumber = Math.floor(Math.random() * 20 + 1);
  document.querySelector('.number').textContent = '?';
  document.querySelector('.record').textContent = 'Highest Record: ' + 0;
  console.log(secretNumber);
});

document.querySelector('.check-btn').addEventListener('click', function () {
  let inputNumber = document.querySelector('.guess-number').value;
  console.log(inputNumber === secretNumber);
  console.log(secretNumber);
  if (inputNumber == secretNumber) {
    document.querySelector('.message').textContent = 'Congratulations!';
    document.querySelector('.number').textContent = secretNumber;
    document.querySelector('body').style.backgroundColor = '#7ef760e6';
    if (score > highestRecord) {
      document.querySelector('.record').textContent =
        'Highest Record: ' + score;
    }
    return;
  } else if (inputNumber < secretNumber) {
    document.querySelector('.message').textContent = 'You guess is too small!';
    score--;
  } else {
    document.querySelector('.message').textContent = 'You guess is too large!';
    score--;
  }
  document.querySelector('.score').textContent = 'Score: ' + score;
});

document.querySelector('.again-btn').addEventListener('click', function () {
  score = 20;
  secretNumber = Math.floor(Math.random() * 20 + 1);
  document.querySelector('.score').textContent = 'Score: ' + score;
  document.querySelector('.message').textContent = 'Guess the number!';
  document.querySelector('.number').textContent = '?';
  document.querySelector('body').style.backgroundColor = 'rgb(20, 20, 20, 0.9)';
});

 

See also  Build a Product Sales Tax Calculator in Browser Using HTML5 CSS3 & Javascript Full Project For Beginners

 

Now if you open index.html file and you will see the output as shown below

 

Leave a Reply