-
Notifications
You must be signed in to change notification settings - Fork 0
/
myscripts.js
45 lines (38 loc) · 1 KB
/
myscripts.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
const body = document.querySelector("body");
const container = document.querySelector('.container')
let num = 40;
changeDimensions(num);
populate(num*num);
start();
function reset() {
clearSquares(num*num);
do {
num = prompt('How many columns would you like? (max : 100)');
}while (num < 1 || num >100)
changeDimensions(num);
populate(num*num);
start();
}
function populate(num){
for (let i = 0; i < num; i++){
let square = document.createElement('div');
square.classList.add('square');
container.appendChild(square);
}
}
function clearSquares(num){
for (let i = 0; i < num; i++){
let square = document.querySelector('.square')
container.removeChild(square);
}
}
function start(){
let squares = document.querySelectorAll('.square');
squares.forEach(square => square.addEventListener('mouseover',changeColor));
}
function changeColor(e){
e.target.classList.add('highlighted');
}
function changeDimensions(num) {
container.style.gridTemplateColumns = `repeat(${num}, 1fr)`
}