-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
39 lines (32 loc) · 1.05 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
let container = document.getElementById('container');
let gridSize = document.getElementById('grid-size');
let clear = document.getElementById('clear');
gridSize.addEventListener('change', reset);
clear.addEventListener('click', reset);
function makeGrid(num) {
container.style.setProperty('--grid-rows', num);
container.style.setProperty('--grid-columns', num);
for (let i = 0; i < (num * num); i++) {
const square = document.createElement('div');
square.classList.add('square');
container.appendChild(square);
}
}
function colorSquares() {
const squares = container.querySelectorAll('.square');
squares.forEach(square => square.addEventListener('mouseover', (e) => {
e.target.style.backgroundColor = getRandomColor();
})
);
}
function getRandomColor() {
const random = () => Math.floor(Math.random() * 256);
return `rgb(${random()}, ${random()}, ${random()})`;
}
function reset() {
let all = document.querySelectorAll('.square');
all.forEach(item => item.remove());
makeGrid(gridSize.value);
colorSquares();
}
reset();