Etch-a-sketch/script.js at master · MauriceZ/Etch-a-sketch · GitHub

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
//var number = prompt("Enter a integer");

initial();

function initial(){
	$(document).ready(function(){
		for (var i=0; i<16*16; i++){
			$('#grid').append('<div class="square"></div>'); // add the squares to the grid
		}
		$(".square").height(800/16-2 + "px"); // set the height and width of the squares
		$(".square").width(800/16-2 + "px");

		$(".square").mouseenter(function(){
			$(this).css("background-color", "red");
		});
	});
};

function red(){
	$(document).ready(function(){
		newGrid();
		$(".square").mouseenter(function(){
			$(this).css("background-color", "#FFF");
		});
	});
};

function blue(){
	$(document).ready(function(){
		newGrid();
		$(".square").mouseenter(function(){
			$(this).css("opacity", "0");
		});
		$(".square").mouseout(function(){
			$(this).fadeTo(400,1);
		});
	});
};

function grey(){
	$(document).ready(function(){
		newGrid();
		$(".square").mouseenter(function(){
			var currentOpacity = $(this).css("opacity"); // checks for the values current opacity
			currentOpacity = currentOpacity - 0.1;
			if (currentOpacity > 0){
				$(this).css("opacity", currentOpacity);
			}
		});
	});
}

function newGrid(){
	$("#grid").empty(); // empty the previous grid
	var n = 0;
	while(n > 60 || n < 1){ // check if the entered number fits the conditions
		n = prompt("Enter a number between 1 and 60");
		if (n > 60 || n < 1){ // check if the entered number fits the conditions
			alert("Invalid number, fool");
		}
	}
	for (var i=0; i<n*n; i++){
		$('#grid').append('<div class="square"></div>'); // add the squares to the grid
	}
	$(".square").height(800/n-2 + "px"); // set the height and width of the squares
	$(".square").width(800/n-2 + "px");
};