Lucky number Generator with source code

Ndukwe Emeka

1677

This is a simple Lucky number generator.. it's actually a game that provides a lucky number and if you get it right, you win the game.. enjoy playing

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

    <div class="theBody">

      <div class="text">

        <h3>Your Last input: <span id="showLastInput"></span></h3>

        <h3>Lucky Number: <span id="showLucky"></span></h3>

      </div>

      <div class="timeInput">

        <input type="number" name="num1" id="num1" />

        <input type="number" name="num2" id="num2" /><br />

        <input type="button" name="btn" id="btn" value="Start" />

        <input type="button" name="stp" id="stp" value="Check" /><br />

        <input type="reset" name="res" id="res" value="Reset" />

      </div>

    </div>

  </div>

  <script src="main.js"></script>

</body>

</html>

Try it Yourself >>

 :root{

  --color: #5C5C5C;

  --sec: #DDDDDD;

}

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  outline: none;

}

body {

    background: var(--color);

}

.container{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

}

.theBody{

  background: var(--sec);

  padding: 5px;

}

.theBody .text{

  margin-bottom: 2.2rem;

  display: flex;

  justify-content: space-between;

}

.text label{

  margin-right: -80px;

}

.timeInput [type = "number"]{

  width: calc(80% / 2);

  height: 60px;

  text-align: center;

  margin: 17px;

  font-size: 2.5rem;

}

.timeInput [type = "button"] {

  width: calc(90% / 2);

  height: 35px;

  font-size: 1.7rem;

  margin: 5px;

  border: none;

  background: #00B57E;

}

.timeInput [type = "reset"]{

  width: 100%;

  height: 35px;

  margin-top: 15px;

  font-size: 1.6rem;

  color: #ffffff;

  background: #D30303;

}

Try it Yourself >>

window.addEventListener('load', myFunction);

var timeArea = document.querySelector('#time');

var showLast = document.querySelector('#showLastInput');

var number1 = document.querySelector('#num1');

var number2 = document.querySelector('#num2');

var button = document.querySelector('#btn');

var stopButton = document.querySelector('#stp');

var resetButton = document.querySelector('#res');

var luckyShow = document.querySelector('#showLucky');

var id;

var arr = [];

var total;

var luck;

var isPlaying;

function myFunction() {

  button.addEventListener('click', startCount);

  stopButton.addEventListener('click', stopCount);

  resetButton.addEventListener('click', resetCount);

  getLucky();

}

function startCount() {

  navigator.vibrate(300,0,300,0)

  if (id = setInterval(frame, 100)) {

    isPlaying = true;

  }

}

function stopCount() {

  navigator.vibrate(300,0,300,0)

  total = Number(number1.value) + Number(number2.value)

  //clearInterval(id);

  arr.push(total);

  console.log(arr);

  showLast.innerHTML = arr;

  if (luck.innerHTML === 5 || arr.length >= 5) {

    clearInterval(id);

    alert('End of game, Total number are ' + arr + ' start Again');

    isPlaying = false;

    number1.value = '';

    number2.value = '';

    arr.splice(0, arr.length);

    showLast.innerHTML = '';

    getLucky();

  }

}

function resetCount() {

  navigator.vibrate(300,0,300,0);

  isPlaying = false;

  number1.value = '';

  number2.value = '';

  arr.splice(0, arr.length);

  showLast.innerHTML = '';

  getLucky();

}

function frame() {

  number1.value = getRandom();

  number2.value = getRandom();

}

function getRandom() {

  return Math.floor(Math.random() * 100 + 1);

}

function getLucky(){

  luck = Number(getRandom()) + Number(getRandom());

  luckyShow.innerHTML = luck;

}

Try it Yourself >>