Automatic Random Winner Picker System
Do you want your own random winner picker system?
So yes you can make your own winner picker system using html css and javascript.
To start this first you need your design, Create your design in adobe xd and then convert it first from adobe xd design to html css.
After converting it apply javascript code to make it functional for winner picker.
Live Preview
Participants Names
Names Shuffling here
Winner Announcement System
Automatic Random Winner Picker
Winner 1
Winner 2
Winner 3
Count Down
10
Watch Video Tutorial
Part-2 This is part 2 to html css design functional using javaScript code.
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Automatic Rendom Winner Picker | Winner Announcement System</title> <!-- Style Sheet --> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- Confetti Animation --> <div class="box" id="box"></div> <!-- Warpper --> <div class="wrapper"> <div class="left-side"> <h2>Participants Names</h2> <textarea id="participants" rows="15" placeholder="Enter Participants Names here"></textarea> <div class="shuffling-area"> <p>Names Shuffling here</p> </div> </div> <div class="right-side"> <h1>Winner Announcement System</h1> <h2>Automatic Random Winner Picker</h2> <div class="display"> <div class="winners"> <p id="winner1">Winner 1</p> <p id="winner2">Winner 2</p> <p id="winner3">Winner 3</p> </div> <div class="timer"> <p>Count Down</p> <h3>10</h3> </div> </div> <a href="javacsript:void(0);" id="start">Start</a> </div> </div> <!-- Script --> <script src="js/main.js"></script> </body> </html>
CSS Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Minion Pro";
}
.wrapper{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 40px 60px;
display: grid;
grid-template-columns: 40% 1fr;
grid-column-gap: 30px;
background: url(../img/confetti.png) no-repeat, radial-gradient(#ffffff 0%, #f2f2f2 100%);
background-size: 100%;
background-position: bottom center;
}
.left-side{
width: 100%;
padding: 20px;
margin-top: 50px;
}
.left-side h2{
color: #B70038;
margin-bottom: 12px;
text-transform: uppercase;
}
.left-side textarea{
width: 100%;
font-size: 18px;
padding: 20px;
color: #B70038;
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4),
inset -1px -1px 2px rgba(0,0,0,0.2);
border: none;
outline: none;
resize: none;
}
.left-side .shuffling-area{
width: 100%;
height: 80px;
background-color: #fff;
margin-top: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.left-side .shuffling-area p{
font-size: 24px;
color: #707070;
}
.right-side{
width: 100%;
padding: 20px;
margin: 0 auto;
text-align: center;
}
.right-side h1{
color: #B70038;
margin-bottom: 5px;
text-transform: uppercase;
}
.right-side h2{
color: #B70038;
margin-bottom: 10px;
}
.right-side .display{
width: 100%;
height: 370px;
background: url(../img/stage.jpg) no-repeat;
background-size: cover;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
padding: 50px 20px;
margin-top: 20px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
.right-side .display .winners{
display: flex;
justify-content: space-between;
column-gap: 15px;
margin-bottom: 50px;
}
.right-side .display .winners p{
color: #fff;
background-color: #B70038;
padding: 8px 15px;
letter-spacing: 1.2;
border-radius: 20px;
text-transform: capitalize;
}
.right-side .display .timer p{
color: #707070;
font-size: 28px;
margin-bottom: 20px;
}
.right-side .display .timer h3{
color: #B70038;
font-size: 60px;
}
.right-side a{
font-size: 18px;
color: #fff;
background: linear-gradient(to bottom, #B70038, #5C001C);
padding: 10px 20px;
border-radius: 5px;
text-transform: uppercase;
text-decoration: none;
border: none;
}
.right-side a:hover{
background: linear-gradient(to top, #B70038, #5C001C);
transition: 0.5s ease-in-out;
}
Javascript Code
var participants = document.getElementById("participants");
var shufflingArea = document.querySelector(".shuffling-area p");
var winner;
document.getElementById("start").addEventListener("click", function(){
if (participants.value == "") {
alert("Please enter participants names..!");
}
else{
getWinners();
}
});
function getNames(){
var names = participants.value.split(",");
winner = names[Math.floor(Math.random() * names.length)];
shufflingArea.innerText = (winner);
var btn = document.getElementById("start");
btn.style.background = "#eee";
btn.setAttribute("disable", "disabled");
}
function getWinners() {
var stop = setInterval(function(){ getNames(); }, 10);
var c = 10;
var t;
var timer_on = 0;
function timer() {
document.querySelector(".timer h3").innerText = (c);
c = c - 1;
t = setTimeout(timer, 1000);
if (c == 6) {
var winner1 = document.getElementById("winner1");
winner1.innerText = winner;
}
else if (c == 3) {
var winner2 = document.getElementById("winner2");
winner2.innerText = winner;
}
else if(c < 0) {
stopCount();
clearInterval(stop);
shufflingArea.innerText = ("Completed..!");
var winner3 = document.getElementById("winner3");
winner3.innerText = winner;
}
}
timer();
function stopCount() {
clearTimeout(t);
timer_on = 0;
confettiFalling();
}
}
For image taken from
Image by Freepik
0 Comments