Counter Update

by Keith Jeter

HTML

<div id="bzz"></div>

CSS

#bzz { 
    width: 990px;
    border: solid 1px #000;
    min-height: 300px;
    overflow: hidden;
}

#bzz div {
    display: block;
    cursor: pointer;
    float: left;
    width: 75px;
    height: 75px;
    border-radius: 10px;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    margin: 10px;
    line-height: 75px;
    overflow: hidden;
}

#bzz div:hover {
    background: #ffcc00;
    color: #000;
}

.wirk {
    background: #000;
    color: #fff;
}

.bz {
    background: #ae2;
    color: #fff;
}
.fzbz {
    background: red;
    color: #fff;
}

JavaScript

var e = document.getElementById("bzz");
var buzz = '<div class="bz">buzz</div>';
var fizzbuzz = '<div class="fzbz">fizzbuzz</div>';
    for (var i = 1; i <= 100; i++){
        if((i % 7 == 0) || (i % 11 == 0)){
            e.innerHTML += buzz;
        } else if ((i % 10 == 7)){
        		e.innerHTML += fizzbuzz;
        } else {
            e.innerHTML += "<div class=\"wirk\">" + i + "</div>";
    }
}