Numbers

Numbers game, initial timer testing and event handling

by LyndseyB

HTML

<div class="number"></div>
<div class="number"></div>
<div class="number"></div>
<div class="number"></div>
<div class="number"></div>
<div class="number"></div>
<div class="number"></div>
<div class="number"></div>
<div class="number"></div>

CSS

.number {
    float:left;  
    margin:10px;
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:40px;
    font-size:20px;
    color:#fff;  
    text-align:center;
    background:#FF8800;
    font-weight:bold;
}

.number:nth-child(3n+1) {
    clear:left;
}

.lose {
    background-color:red;
}

JavaScript

var minseconds = 5;
var maxseconds = 15;
var minspeed = 250;
var maxspeed = 2000;

var element = $('.number');

function random(min,max) {
    return Math.floor(Math.random() * (max - min) + min);
}

element.each(function(index) {
    var randomNumber = random(minseconds,maxseconds);
    element.eq(index).html(randomNumber);
    var speed = random(minspeed,maxspeed);
    countdown(index, randomNumber, speed);
    
});

function countdown(index,num, speed) {
    var timer = setInterval(function() {      
        element.eq(index).html(num--);
        if(num === -1) {
            clearInterval(timer);
            element.eq(index).addClass('lose');
        }
    }, speed);
}