-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
82 lines (72 loc) · 2.16 KB
/
main.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
document.addEventListener("DOMContentLoaded", function () {
const container = document.querySelector(".container");
let num = 16;
let color = "blue";
let rgbMode = false;
function getRandomRGBColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
function createSketchGrid() {
const dev = document.querySelector(".sketch");
if (dev) {
dev.remove();
}
const New = document.createElement('div');
New.setAttribute('class', 'sketch');
for (let i = 0; i < num * num; i++) {
const tst = document.createElement('div');
tst.setAttribute('class', 'cell');
New.appendChild(tst);
}
container.appendChild(New);
let cell = document.querySelectorAll('.cell');
let n = 697 / num + "px";
for (var i = 0; i < cell.length; i++) {
cell[i].style.height = n;
cell[i].style.width = n;
}
cell.forEach(function (div) {
div.addEventListener('mouseenter', function () {
if (rgbMode) {
var randomColor = getRandomRGBColor();
div.style.backgroundColor = randomColor;
} else {
div.style.backgroundColor = color;
}
});
});
}
createSketchGrid();
let rgb = document.querySelector("#rgb");
rgb.addEventListener("click", () => {
rgbMode = true;
});
let red = document.querySelector("#r");
let green = document.querySelector("#g");
let blue = document.querySelector("#b");
red.addEventListener("click", () => {
color = "red";
rgbMode = false;
});
green.addEventListener("click", () => {
color = "green";
rgbMode = false;
});
blue.addEventListener("click", () => {
color = "blue";
rgbMode = false;
});
const btn = document.querySelector('#ref');
btn.addEventListener("click", () => {
num = prompt("Enter number of cells on each side");
while (num > 100 || num <= 0) {
alert("Please keep the number in the range of 1 - 100 ");
num = prompt("Enter number of cells on each side");
num = Number(num);
}
createSketchGrid();
});
});