-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
47 lines (43 loc) · 1.58 KB
/
app.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
const grid = document.querySelector('.grid');
function createGrid(size) {
while (grid.firstChild) {
grid.firstChild.remove();
}
for (let i = 0; i < size**2; i++) {
const createCell = document.createElement('div');
createCell.setAttribute('class', 'gridCell');
grid.appendChild(createCell);
}
const cells = Array.from(document.querySelectorAll('.gridCell'));
cells.forEach(cell => {
cell.addEventListener('mouseover', () => {
let brightness = Number(getComputedStyle(cell).filter.replace(/[^0-9.]/g, '')) - 0.1;
if (getComputedStyle(cell).backgroundColor !== 'rgb(255, 255, 255)') {
cell.style.filter = `brightness(${brightness})`;
}
else {
cell.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 257) + ',' + Math.floor(Math.random() * 257) + ',' + Math.floor(Math.random() * 257) + ')';
}
})
})
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
}
createGrid(16)
const sizeButton = document.querySelector('#sizeButton');
sizeButton.addEventListener('click', () => {
let gridSize = prompt('Change grid size');
while (gridSize > 100 || isNaN(gridSize)) {
if (gridSize > 100) {
alert('Maximum grid size: 100');
}
if (typeof gridSize !== 'number') {
alert('Digit a number')
}
gridSize = prompt('Change grid size');
}
if (!gridSize) {
gridSize = 16
}
createGrid(gridSize);
})