-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
56 lines (45 loc) · 1.3 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
const container = document.getElementById("container");
const color = document.getElementById("colorOption");
const clear = document.getElementById('clear-button');
clear.addEventListener('click', function()
{
container.innerHTML = '';
color.value = 'rgba(0,0,0,0)';
});
function makeRows(rows, cols) {
container.style.setProperty('--grid-rows', rows);
container.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "grid-item";
cell.addEventListener("mouseover", sketch);
}
}
function sketch(e)
{
e.target.style.backgroundColor = color.value;
}
function disableButtons()
{
document.getElementById("size-opt-1").disabled = true;
document.getElementById("size-opt-2").disabled = true;
document.getElementById("size-opt-3").disabled = true;
}
const size1 = document.getElementById("size-opt-1");
size1.addEventListener('click', function()
{
makeRows(9, 9);
disableButtons();
});
const size2 = document.getElementById("size-opt-2");
size2.addEventListener('click', function()
{
makeRows(12, 12);
disableButtons();
});
const size3 = document.getElementById("size-opt-3");
size3.addEventListener('click', function()
{
makeRows(16, 16);
disableButtons();
});