Number guess Game - Real Helper

Ndukwe Emeka

1637

This is a Math game that gives a certain number for you to guess. Guess the numbers correctly and gain more marks

 <!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">

  <title>HTML</title>
  
  <!-- HTML -->
  

  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="container">
     <h3>NUMBER GUESSING GAME</h3>
     <h3 class="second">Input a number from 1- 100</h3>
     <p>Your score: <span id="dem">0</span></p>
     <p class="previous">Previous Entry: <span id="pre"></span></p>
     <input type="number" id="area" placeholder="Your number"><br>
     <button id="btn">Check</button><br>
     <button id="new">Reset</button>
     <button id="resetbtn">New game</button>
     <h4 id="output"></h4>
   </div>
  <script src="main.js"></script>
</body>
</html>

Try it Yourself >>

  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    font-size: 15pt;
}
.container {
  margin: 15px;
  background: #000A78;
  color: white;
  padding: 10px;
 min-height: 200px;
 box-shadow: 3px 4px 7px #606060;
}
.container h3 {
  margin-bottom: 10px;
  text-align: center;
}
.container .second {
  font-size: 14px;
}
.container input {
  width: 100%;
  height: 30px;
  text-align: center;
  margin-bottom: 10px;
  outline: none;
  font-size: 20px;
}
#btn , #resetbtn, #new {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  border: none;
  outline: none;
}
#btn {
  background: #009F67;
  color: white;
  font-size: 20px;
}
#new {
  width: 45%;
  font-size: 20px;
  margin-right: 10px;
  margin-left: 10px;
}
#resetbtn {
  background: #F20000;
  color: white;
  font-size: 20px;
  width: 43%;
}
#btn:active , #resetbtn:active, #new:active {
  background: #00F21F;
} 
#output {
  padding: 2px;
  font-size: .9em;
  text-align: center;
}
p {
  font-size: 12px;
  margin: 7px;
}

Try it Yourself >>

const button = document.querySelector('#btn');
const output = document.querySelector('#output');
const reset = document.querySelector('#resetbtn');
const newgames = document.querySelector('#new');

var numbers = [Math.floor(Math.random() * 100)];


newgames.addEventListener('click', frame);
reset.addEventListener('click', myFunction);
var score = 0;
button.addEventListener('click', function() {
  var arr = [];
  var answer = document.getElementById('area').value;

  if (answer < numbers) {
    output.innerHTML = '' + answer + ' is smaller than the number, play again';
    
    arr.push(answer);
    pre.innerHTML += arr;
  } else if (answer > numbers) {
    output.innerHTML = '' + answer + ' is bigger than the number, play again';
  }
  if (answer == numbers) {
    output.innerHTML = 'You got it right ' + numbers + ' is the answer';

    score++;
    answer.value = '';
  }
  dem.innerHTML = score;

});

function myFunction() {
  var answer = document.getElementById('area');
  score = 0;
  dem.innerHTML = 0;
  numbers = [Math.floor(Math.random() * 100)];
  answer.value = '';
  output.innerHTML = '';
}

function frame() {
  var answer = document.getElementById('area');
  numbers = [Math.floor(Math.random() * 100)];
  answer.value = '';
  output.innerHTML = '';
}

Try it Yourself >>