Random squares

by justi

HTML

<button onclick="run()">Go</button><br><br>

CSS

.cell {float: left;}
.container {border: 1px solid #000;}
button {margin-left: 0;}

JavaScript

function run() {
    
    var o = document.getElementById("randomBlock");
    if (o) {
        o.parentNode.removeChild(o);
    }
    
    var rows = 10;
    var cols = 10;
    var size = 30;
    
    var container = document.createElement("div");
    container.id = "randomBlock";
    container.className = "container";
    container.style.width = (cols * size) + "px";
    container.style.height = (rows * size) + "px";
    
    for (var i = 0, len = rows * cols; i < len; i++) {
        o = document.createElement("div");
        o.className = "cell";
        o.style.height = size + "px";
        o.style.width = size + "px";
        o.style.backgroundColor = chooseColor();
        container.appendChild(o);
    }
    document.body.appendChild(container);
}
function chooseColor() {
    var firstColor = "#FF44CC";
    var secondColor = "#004433";
    return firstColor;
}
window.onload = run;