etch_a_sketch/app.js at main · BertaRyan/etch_a_sketch · GitHub

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const btn1 = document.querySelector('#one');
const btn2 = document.querySelector('#two')
const btn3 = document.querySelector('#three')
const reset = document.querySelector('.clear')

const gridContainer = document.querySelector('.grid-container')

btn1.addEventListener('click', (e) => {
    btn1.disabled = true;
    btn2.disabled = true;
    btn3.disabled = true;

    makeGrid();
    mHover();
    reset.addEventListener('click', () => {
        greatReset()
    })
    once = true;
})

btn2.addEventListener('click', () => {
    btn1.disabled = true;
    btn2.disabled = true;
    btn3.disabled = true;

    for (let i = 0; i < 1024; i++) {
        const div = document.createElement('div');
        div.classList.add('medium')
        gridContainer.appendChild(div)
    }

    mHover()
    reset.addEventListener('click', () => {
        greatReset()
    })

    once = true;
})

btn3.addEventListener('click', () => {
    btn1.disabled = true;
    btn2.disabled = true;
    btn3.disabled = true;

    for (let i = 0; i < 3900; i++) {
        const div = document.createElement('div');
        div.classList.add('small')
        gridContainer.appendChild(div);
    }
    reset.addEventListener('click', () => {
        greatReset()
    })

    mHover()

    once = true;
})


function makeGrid() {
    for (let i = 0; i < 255; i++) {
        let div = document.createElement('div');
        div.classList.add('big');
        gridContainer.appendChild(div);
    }
}

function mHover() {
    const bigChecker = document.querySelectorAll('div.big');
    bigChecker.forEach((square) => {
        square.addEventListener('mouseover', () => {
            square.style.backgroundColor = "black";
        })
    })

    const midChecker = document.querySelectorAll('div.medium');
    midChecker.forEach(mid => {
        mid.addEventListener('mouseover', () => {
            mid.style.backgroundColor = 'black';
        })
    })

    const smallChecker = document.querySelectorAll('div.small');
    smallChecker.forEach(small => {
        small.addEventListener('mouseover', () => {
            small.style.backgroundColor = 'black';
        })
    })
}


function greatReset() {
    gridContainer.innerHTML = '';

    btn1.disabled = false;
    btn2.disabled = false;
    btn3.disabled = false;
};