Choose Random Winner: Jquery + CSS3 Andrew Pougher
Choose Random Winner: Jquery + CSS3
HTML
<div class="container">
<h1 class="lead">Random Winner Thing by Andrew Pougher</h1>
<button class='choosewinner btn btn-sm btn-danger'>Choose Winner</button>
<table class="table text-center">
<thead>
<tr>
<th>NAME</th>
<th>Email</th>
<th>Competition</th>
</tr>
</thead>
<tbody class="row">
<tr class="entrant">
<td>bob</td>
<td>[email protected]</td>
<td>Holiday for 2</td>
</tr>
<tr class="entrant">
<td>Suze</td>
<td>[email protected]</td>
<td>Holiday for 2</td>
</tr>
<tr class="entrant">
<td>Andrew</td>
<td>[email protected]</td>
<td>Holiday for 2</td>
</tr>
<tr class="entrant">
<td>Lizzie</td>
<td>[email protected]</td>
<td>Holiday for 2</td>
</tr>
</tbody>
</table>
CSS
.highlight {
color: £FFF;
background-color: #C00;
-webkit-opacity: 0.45;
-moz-opacity: 0.45;
opacity: 0.45;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.youwin{font-size:30px; background-color: #ffa; -webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1}
JavaScript
function highlight() {
var $divs = $('.entrant').removeClass('highlight');
var random = Math.floor(Math.random() * $divs.length);
$divs.eq(random).addClass('highlight');
}
$(".choosewinner").click(function(){
//highlight();
var startTime = new Date().getTime();
var interval = setInterval(function(){
if(new Date().getTime() - startTime > 5000){
clearInterval(interval);
$('.highlight').addClass('youwin');
return;
}
highlight();
}, 200);
});