Lottery Lucky Draw generator using JavaScript

0
2335

In this tutorial, we will be using JavaScript to generate a Lottery Lucky Draw in our webpage.

The basic idea is to rotate through a number of random numbers and and stop it at any random point to decide the winner of the lottery.

Follow this video for complete guidance :

Full Source Code for Lottery Draw Generator with JavaScript :

<style type="text/css">
  body{
    background: #3f9d43;
  }
  .box{
    width: 50%;
    margin: 0 auto;
    padding:30px;
    text-align: center;
  }
  .odometer{
    font-size: 12em;
    background:#fff;
      border-radius:40px 40px 0 0;
      margin-top:50px;
      border-bottom: 2px solid #ddd;
  }
  .btn-winner{
    font-size: 2em;
    background: #6c9dc9;
    color: #fff;
    cursor: pointer;
  }
  .btn-winner:hover {
      transition-duration: 0.1s;
      box-shadow:  0 0 18px rgba(255, 255, 255, 0.75);
      user-select: none;
  }

</style>

<div id="odometer" class="odometer box">0</div>
<div class="btn-winner box" onclick="getWinner();">Get Winner</div>


  <script type="text/javascript">

  function generateRandom(maxLimit = 100){
    let rand = Math.random() * maxLimit;
    rand = Math.floor(rand);
    return rand;
  }
  
  function getWinner(){
    document.getElementsByClassName('btn-winner')[0].innerHTML = 'Please wait for the result ....';
    interval = setInterval(function(){
      	document.getElementById('odometer').innerHTML = generateRandom();
    },100);

    setTimeout(function(){
      clearInterval(interval);
      document.getElementsByClassName('btn-winner')[0].innerHTML = 'Get Winner';
    },3000);
  }

    
</script>

 

ALSO READ  Easy Face Detection Using JQuery

Comments are closed.