Coloured box row

3 rows, row 1 colour /grey *5 row 2 grey / colour *5, row 3 colour /grey *5

by Dan Wright

HTML

<div id="banner">
<div id="banner-container0"></div>
</div>

CSS

#banner-container {
    padding:0px;
    margin:0px;
}
.generated {
    padding:0px;
    margin:0px;
    background:#2d2;
    display:inline-block;
}
.generated:nth-child(even) {
    background:#d22;
}

JavaScript

$(document).ready(function () {

    createBanner();

});

function createBanner() {
    //creates a row with 20 boxes 
    var cnt = 0;
    var vin = 20;
    //creates 3 rows
    var rowNum = 3;

    //finds screen width
    var winW = $(window).outerWidth();

    //divides screen width by 10 - amount of boxes in row
    var boxW = winW / vin;

    //creates a new var that is equal to box width - creates square boxes
    var boxH = boxW;

    //$("#container").html("");
    while (cnt < vin) {
        $('#banner-container').append('<div class="generated"></div>');
        cnt++;
    }

    //adds box width and box height to .generated css
    $('.generated').css({
        'width': boxW,
            'height': boxH
    });
    
    //clones 1st row and contents 3 times
    while (cnt < rowNum) {
    $('#banner-container0').clone().append();
        cnt++
    }
}

//(function ($) {
    //$.fn.clone = function () {
        //return.this.clone().prop();
    //};
//}(jQuery));

function generateNewId(element, suffix) {
 var newId = $(element).attr('id').replace(/0/,suffix);
 $(element).attr('id', newId);
 $(element).val(newId); // for demo use
}
var formNewId = 1;
$("#addBtn").on('click', function(){
    var newForm = $("#data0").clone();
    $('input', newForm).each(function(i,e){
		ReplaceID(this, formNewId);
	});	
    ReplaceID(newForm, formNewId);	
	$("body").append(newForm);
    formNewId++;
});