Pattern Boxes

by Spencer Smith

HTML

<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="square">
    <div...

CSS

.box {
    float:left;
    width:30px;
    height:30px;
    //transition:border .1s;
    border: 1px solid transparent;
    box-sizing: border-box;
    background-color:whitesmoke;
}
.box:hover {
    border: 4px solid limegreen;
}
.black {
    background-color:lightgray;//black
}
.colored {
    background-color:deepskyblue;//crimson
}
.square {
    width:90px;height:90px;
    float:left;
}

JavaScript

// Base framework for Boxes web app

var box = document.getElementsByClassName('box');
//alert(box.length);

function wisdom(i2) {
    box[i2].onclick = function () {
        if (box[i2].className == "box") {
            box[i2].className = "black box";
        } else if (box[i2].className == "black box") {
            box[i2].className = "colored box";
        } else {
            box[i2].className = "box";
        }
    };
}

for (i = 0; i < box.length; i++) {
    wisdom(i);
}