circles

by Jed Mao

HTML

<div id="grid"></div>

SCSS

$radius: 50px;
$gap: 6px;

#grid {
    width: ($radius + $gap) * 5;
}

.circle {
    display: inline-block;
    float: left;
    border-radius: $radius;
    width: $radius;
    height: $radius;
    border: $gap/2 solid white;
    background-color: yellowgreen;
}

JavaScript

var frag = document.createDocumentFragment();
for (var i = 0; i < 25; i++)
	frag.appendChild($('<div/>').addClass('circle').get(0));

$('#grid').append(frag).on('click', '.circle', function(){
	$(this).css('backgroundColor', 'red');
});