/
sketchy.js
73 lines (63 loc) · 1.84 KB
/
sketchy.js
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var boxRow = 10;
var totalBoxes = boxRow * boxRow;
var boxWidth = 800 / boxRow;
var boxHeight = boxWidth;
var backgroundCol = "red";
var mouseCol = "orange";
// add selected class on page load
$("#bgcolors > .red").addClass("selected");
$("#mousecolors > .orange").addClass("selected");
//change background color
$(".backgroundSquare").on("click", function(){
$(".backgroundSquare").removeClass("selected");
$(this).addClass("selected");
backgroundCol=$(this).css("background-color");
$(".square").css("background", backgroundCol);
});
//change mouseover color
$(".mouseSquare").on("click", function(){
$(".mouseSquare").removeClass("selected");
$(this).addClass("selected");
mouseCol=$(this).css("background-color");
});
//load number of squares and colors
for(var i=0;i<totalBoxes;i++) {
$("#wrapper").append("<div class='square'> </div>");
$(".square").css("width", boxWidth);
$(".square").css("height", boxHeight);
$(".square").on("mouseenter", function() {
$(this).css("background", mouseCol);
});
}
//reset to selected background color
$("#resetBtn").on("click", function(){
reset();
});
//fires any time there is a change in the input field
$("#okBtn").on("click", function(){
reset();
});
//reset grid to chosen bg, mouse color and number of pixels
function reset() {
$("#wrapper").empty();
var boxRow = $("#numPixels").val();
if(boxRow>25) {
boxRow=25;
$("#numPixels").val("25");
} else if (boxRow<1) {
boxRow=1;
$("#numPixels").val("1");
}
var totalBoxes = boxRow * boxRow;
var boxWidth = 800 / boxRow;
var boxHeight = boxWidth;
for(var i=0;i<totalBoxes;i++) {
$("#wrapper").append("<div class='square'> </div>");
$(".square").css("background", backgroundCol);
$(".square").css("width", boxWidth);
$(".square").css("height", boxHeight);
$(".square").on("mouseenter", function() {
$(this).css("background", mouseCol);
});
}
}