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 –