<div id="gameContent">
</div>
#gameContent{display:block; margin:auto; text-align:center;}
#gameContent label{
background:black;
width:50px;
height:50px;
margin:5px;
display:inline-block;
float:none;
}
#gameContent label.active{
background-color:green;
}
#gameContent label.active.error{
background-color:red;
}
$(document).ready(function(){
for ($y=1; $y<=6; $y++){
var appendHTML="<div class='row'>";
var randomX=Math.floor(Math.random() * 6) + 1;
for (var $x=1;$x<=6;$x++){
var errorClass="";
if ($x==randomX){
errorClass=" class='error' ";
}
appendHTML +="<label "+errorClass+"></label>";
}//x for
appendHTML +="</div>";
$("#gameContent").append(appendHTML);
}//y for
$("#gameContent label").click(function(){
$(this).addClass("active");
});
});
This Pen doesn't use any external CSS resources.