Random Lucky Draw Application using JavaScript Programming

In this tutorial I have created a website which performs lucky draw activity using javascripts random function. the random. This function is natively available in JavaScript & can be called using the syntax below –

Math.random()

This function returns a random value between the range of 0 to 1.

We will use this feature to create our lucky draw website. Download all code files, images & resources for this project – CLICK HERE

Default Home Page Code –

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Teko:400,500,600,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,500i,700,700i|Teko&display=swap" rel="stylesheet">

  <title>Hello, world!</title>
  <style>
    .footerlinks {
      color: #ffffff;
      text-decoration: none ;
    }

    .footerlinks:hover {
      color: #ffd800;
    }
    .winnertext{
     
      font-weight: 500;
      font-size: 40px;
      color: #4c27a3;
    }
    .winnerno{
      background-color: #ffd800;
      font-family: 'Teko', sans-serif;
      font-weight: 600;
      font-size: 75px;
      border: 2px solid #fa9747;
      border-radius: 10px;
      margin-bottom: 0px;
      color: #482cc2;
    }
    .btn{
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 25px;
    }

    #footer2 {
      background: #272727;
    }
  </style>
</head>

<body>
    <div class="row">
        <div class="col">
            <img src="imgs/main-header1.jpg" style="width: 100%;" class="card-img-top img-fluid">
        </div>
      </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 mx-auto text-center">
        <div class="card">
          

          <div class="card-body">
            <div class="row">
              <div class="col">
                <h1>50K Merch Giveaway Lucky Draw Contest</h1>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <hr />
              </div>
            </div>

            <div class="row mx-auto">
              <div class="col-2  mx-auto">
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <div class="col">
                        <img id="img1" src="imgs/user.png" width="150px" class="img-fluid p-1">
                      </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col">
                          <p class="winnertext" style="margin-bottom: 0px;">1st</p>
                        </div>
                      </div>
                    <div class="row">
                      <div class="col">
                        <hr>
                      </div>
                    </div>
                    
                    <div class="row">
                      <div class="col form-group input-group-lg">
                          <h1 id="winnertext1"class="display-4 winnerno">0000</h1>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col form-group">
                        <button id="btn1" type="button" class="btn btn-lg btn-block btn-success"
                          >
YouTube video tutorial –