-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
40 lines (35 loc) · 1.2 KB
/
script.js
File metadata and controls
40 lines (35 loc) · 1.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$( document ).ready(function() {
// Handler for .ready() called.
// add divs to the screen
for (var i=0; i<=15; i++) {
for (var j=0; j<=15; j++) {
$("#container").append("<div class='square'></div>");
}
}
// this functionality colors in each square by changing class
$('#container').on('mouseover', '.square', function() {
$(this).addClass('occupied');
});
// click on clear button
$('#button').on('click', function() {
var numBlocks = +window.prompt("How many grids per side?","16");
if (numBlocks == 0) {
alert("Number of blocks can not be 0. That is not cricket");
numBlocks = 16;
}
// remove old squares
$('.square').remove();
// calculate size of new squares
var pxPerSquare = 960/numBlocks + 'px'; //960 / numBlocks;
// add new divs
for (i=0; i<numBlocks; i++) {
for (j=0; j<numBlocks; j++) {
$("#container").append("<div class='square'></div>");
}
}
// add css for width and size for new squares
$('.square').css({'width': pxPerSquare,
'height': pxPerSquare});
// what about border around grids. it is not really needed, because it may not be perfect, hide it after complete
});
});