-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
63 lines (55 loc) · 1.75 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
const gridContainer = document.querySelector('.gridContainer');
const black = document.querySelector('#black');
const rainbow = document.querySelector('#rainbow');
const reset = document.querySelector('#reset');
let gridSize = 16;
function createGrid() {
let gridRows = gridSize;
let gridCols = gridSize;
for (let i = 0; i < gridRows; i++) {
const row = document.createElement('div');
row.classList.add('grid-row');
gridContainer.appendChild(row);
for (let j = 0; j < gridCols; j++) {
const cell = document.createElement('div');
cell.classList.add('grid-cell');
row.appendChild(cell);
};
};
};
createGrid();
black.addEventListener('click', () => {
let cells = Array.from(document.querySelectorAll('.grid-cell'));
cells.forEach((cell) => {
cell.addEventListener('mouseover', () => {
cell.style.backgroundColor = 'black';
});
});
});
function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random()*16)];
};
return color;
};
rainbow.addEventListener('click', () => {
let cells = Array.from(document.querySelectorAll('.grid-cell'));
cells.forEach((cell) => {
cell.addEventListener('mouseover',() => {
cell.style.backgroundColor = getRandomColor();
});
});
});
reset.addEventListener('click', () => {
gridSize = parseInt(prompt('Grid size?, Between 1 and 50:'));
if (gridSize < 1 || gridSize > 50) {
alert('Sorry, max number is 50');
gridSize = 50;
}
while (gridContainer.firstChild) {
gridContainer.removeChild(gridContainer.firstChild);
}
createGrid();
});