JSFiddle - React, Tailwind, and code Playground

by vaibhav2812

HTML

<h1>Please enter value between 1 to 10</h1>
<div>
  <input id="user-input" min="1" max="20" type="number">
  <button id="btn">Click</button>
</div>
<p id="info-1"></p>
<p id="info-2"></p>
<button id="reset" onclick="onReset()">
Start new Game
</button>

CSS

button {
  font-family: 'helvetica neue', helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

JavaScript

const _getRandomNumber = () => {
  return Math.floor(Math.random() * 10);
}
let randomNumber = _getRandomNumber();
const myBtn = document.querySelector('#btn');
let previousNum = [];
myBtn.onclick = function() {
  let currentNumber = _next();
  _compare(+currentNumber);
}
const _next = () => {
  return document.getElementById('user-input').value;
}
const _compare = (current, pre) => {
  console.log(randomNumber);
  if (current === randomNumber) {
    document.querySelector('#info-1').textContent = 'Congratulation you won';
  } else if (current < randomNumber) {
    previousNum.push(current);
    document.querySelector('#info-1').textContent = 'Last guess was too Low!';
  } else {
    previousNum.push(current);
    document.querySelector('#info-1').textContent = 'Last guess was too high!';
  }
  document.querySelector('#info-2').textContent = "Previous guesses " + previousNum.join(' ');
}
        
onReset() {
  previousNum = [];
  randomNumber = null;
}