-
Notifications
You must be signed in to change notification settings - Fork 0
/
scripts.js
43 lines (36 loc) · 1.19 KB
/
scripts.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
const container = document.getElementById("squareContainer");
function createNewGrid(size) {
container.innerHTML = "";
if (size >= 100 || size <= 0) {
size = 100;
}
for (let i = 0; i < size * size; i++) {
let square = document.createElement("div");
square.classList.add("square");
square.style.width = `${100 / size}%`;
square.style.height = `${100 / size}%`;
container.appendChild(square);
}
function getRandomColor() {
let red = Math.floor(Math.random() * 256);
let green = Math.floor(Math.random() * 256);
let blue = Math.floor(Math.random() * 256);
let color = "#" +
red.toString(16).padStart(2, '0') +
green.toString(16).padStart(2, '0') +
blue.toString(16).padStart(2, '0');
return color;
}
const squares = document.querySelectorAll(".square");
squares.forEach((square) => {
square.addEventListener("mouseover", () => {
square.style.backgroundColor = getRandomColor();
});
});
}
const resizeBtn = document.getElementById("resize-btn");
resizeBtn.addEventListener("click", () => {
let size = prompt(`Please enter the desired board size:`);
createNewGrid(size);
});
createNewGrid(16);