Pyramid

create a pyramid using css and javascript

by Randy Crews

HTML

<div id="container"></div>

CSS

.buildingBlock {
    display:inline-block;
    width:20px;
    height:20px;
    margin:2px 5px;
    background-color:#eee;
    border:2px solid #ccc;
}
#container {
    text-align:center;
}

JavaScript

var objContainer = document.getElementById( "container" ),
    intLevels = 10,
    strBlocksHTML = '';
    
// Using innerHTML is faster than DOM appendChild
for( var i=0; i<intLevels; i++ ){
    for( var n=0; n<i+1; n++ ){
        strBlocksHTML += '<div class="buildingBlock"></div>';
    }
    strBlocksHTML += '<div></div>'; // Line break after each row
}

objContainer.innerHTML = strBlocksHTML;