-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
155 lines (124 loc) · 4.23 KB
/
script.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
const container = document.querySelector(".container");
const gridSize = document.querySelector(".grid-size");
const selectColor = document.getElementById("select-color");
const clear = document.getElementById("clear");
const toggleGrid = document.querySelector("toggle-grid");
const pencil = document.getElementById("pencil");
const rainbow = document.getElementById("rainbow");
const eraser = document.getElementById("eraser");
// ------ function to make grids ------- //
function gridMaker(grid) {
for(let i = 0; i < grid * grid; i++) {
let grids = grid <= 100 ? document.createElement("div") : false;
container.appendChild(grids);
grids.style.width = `calc(25rem/${grid})`;
grids.style.height = `(calc(30rem/${grid})`;
grids.classList.add("grids");
// ------- default pencil mode -------- //
function pencilMode() {
container.addEventListener("mousedown", () => {
grids.addEventListener('mouseenter', mouseEnter);
grids.addEventListener("click", () => {
selectColor ? grids.style.background = selectColor.value : false;
})
});
function mouseEnter() {
selectColor ? grids.style.background = selectColor.value : false;
}
container.addEventListener('mouseup', () => {
grids.removeEventListener('mouseenter', mouseEnter, false);
})
}
pencilMode();
//----- when in another mode, click on pencil button to call its function -----//
pencil.addEventListener('click', () => {
pencilMode();
})
// -------- rainbow mode to paint with random colors ------- //
function rainbowMode() {
let randomColor = Math.floor(Math.random()*16777215).toString(16);
container.addEventListener("mousedown", () => {
grids.addEventListener('mouseenter', mouseEnter);
grids.addEventListener("click", () => {
grids.style.backgroundColor = "#" + randomColor;
})
});
function mouseEnter() {
grids.style.backgroundColor = "#" + randomColor;
}
container.addEventListener('mouseup', () => {
grids.removeEventListener('mouseenter', mouseEnter, false);
})
}
// ----- click on rainbow button to call its function ----- //
rainbow.addEventListener('click', () => {
rainbowMode();
});
// --------- click to clear the sketch pad ------- //
clear.addEventListener('click', () => {
grids.style.background = "";
});
// ---------- click to eraser grids ----------- //
function eraserBtn() {
let eraserGrids = Array.from(document.querySelectorAll(".grids"));
eraser.onclick = function() {
container.addEventListener('mousedown', () => {
eraserGrids.forEach(grids => {
grids.addEventListener('click', () => {
grids.style.backgroundColor = "";
})
})
})
}
}
eraserBtn();
};
}
gridMaker(24);
// ------ when clicked show or hide grids ----- //
function changeGrid() {
let hideGrid = Array.from(document.querySelectorAll(".grids"));
hideGrid.forEach(grids => {
grids.classList.toggle("hide-grid");
})
}
// -------- function to clear sketch pad and create new grids when user clicks button -------- //
// ---the grids sizes are small: 8x8, medium: 16x16, big: 24x24 and bigger: 36x36 --- //
function moreGrids() {
let gridValue = 0;
gridSize.onclick = function () {
let allGrids = Array.from(document.querySelectorAll(".grids"));
allGrids.forEach(grids => {
grids.remove();
});
gridValue++ ;
// console.log(gridValue)
switch (true) {
case gridValue === 1 :
gridMaker(8);
break;
case gridValue === 2 :
gridMaker(16);
break;
case gridValue === 3 :
gridMaker(24);
break;
case gridValue === 4 :
gridMaker(36);
break;
case gridValue === 5 :
gridValue = 1;
gridMaker(8);
break;
}
}
}
moreGrids();
// ----- download draw from the sketch ----- //
document.querySelector('.download').addEventListener('click', function() {
html2canvas(document.querySelector('.container'), {
onrendered: function(canvas) {
return Canvas2Image.saveAsPNG(canvas);
}
});
});