Squares

by rsmclaug

HTML

<div id="board">
    <div class="row top-row">
        <span class="cell vertical">&nbsp;</span>
        <span class="number">1</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">2</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">3</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">4</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">5</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
    </div>
        <div class="row">
        <span class="cell vertical">&nbsp;</span>
        <span class="number">6</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">7</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">8</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">9</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">10</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
    </div>
    <div class="row">
        <span class="cell vertical">&nbsp;</span>
        <span class="number">11</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">12</span>
        <span class="cell horizontal">&nbsp;</span>
        <span class="cell vertical">&nbsp;</span>
        <span class="number">13</span>
       ...

CSS

#board {
    width: 95%;
    margin: 0 auto;
    text-align: center;
}
div.row {
    width: 100%;
}
.row span.cell {
    display: inline-block;
    width: 10px;
}
.row span.number {
    position: absolute;
    padding-top: 15px;
    padding-left: 15px;
    color: gray;
    display: none;
}
div.row span.selected {
    background-color: green;
}
.row span.horizontal {
    width: 50px;
    height: 10px;
    background-color: #CECECE;
    margin: 0 -4px;
}

.row span.vertical {
    height: 60px;
    width: 10px;
    background-color: #CECECE;
}

.second-last-row .vertical {
    padding-bottom: 10px;
    margin-bottom: -10px;
}

JavaScript

$(".cell").on("click", function(){
    var $this = $(this);
    $this.addClass("selected");
})