Simple checkbox game (0.1)
HTML
<center>Test your skill. How many boxescan you check in 20 seconds?</center>
SCSS
.roundedOne {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}
.form-control{width: 15%;}
JAVASCRIPT
var total = 0;
var play = false;
function display(element) {
var now = new Date();
if (!play) {
play = true;
startTime = now.getTime();
}
if (now.getTime() - startTime > 20000) {
element.checked = !element.checked;
return;
}
if (element.checked)
total++;
else
total--;
element.form.num.value = total;
}
function restart(form) {
total = 0;
play = false;
for (var i = 1; i <= 100; ++i) {
form.elements[i].checked = false;
}
}
document.write("<form><center>");
document.write('<input type="text" value="0" name="num" class="form-control" ');
document.write('size=10 onFocus="this.blur()"><BR>');
document.write("<hr size=1 width=40%>")
for (var i = 0; i < 10; ++i) {
for (var j = 0; j < 10; ++j) {
document.write('<input type="checkbox" onClick="display(this)" class="roundedOne">');}
document.write("<br/>");}
document.write("<hr size=1 width=40%>");
document.write('<input type="button" VALUE="restart" class="btn btn-sm btn-success" ');
document.write('onClick="restart(this.form)">')
document.write("</center></form>")
