CracklePop

A spin on Fizzbuzz in CSS

by jshacker

HTML

<div id="CracklePop">
</div>

CSS

#CracklePop {
    background-color: #666;
    min-height: 601px;
    padding-top: 1px;    
    counter-reset: FizzBuzz;
}
.item{
    background-color: #FFF;
    min-height: 5px;
    min-width: 50px;
    margin: 2px;
    counter-increment: CracklePop;
}
.item:nth-child(3n)::after{
    content: 'Crackle';
}
.item:nth-child(5n)::after{
    content: 'Pop';
}
.item:nth-child(15n)::after{
    content: 'CracklePop';
}
.item::after{
    content: counter(CracklePop);
}

JavaScript

$(function(){
    
    for(var i = 0; i < 100; i++){
        var generateItems = $('<div class="item"></div>');
        generateItems.appendTo($('#CracklePop'));
    }
});