top_etchasketch/script.js at main · espiacent/top_etchasketch · 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
100
101
102
103
104
105
106
107
// generate grid as canvas
const canvas = document.querySelector('.canvas');
for (let i = 1; i < 257; i++) {
    canvas.innerHTML += `<div class="gridfield" id="${i}"</div>`;
};

// global penCoulour value
window.penColour = 'black';

// paint by mouse click and hold
let mouseDown = false
window.onmousedown = () => (mouseDown = true);
window.onmouseup = () => (mouseDown = false);

canvas.addEventListener('mouseover', e => {
    if (mouseDown) {
        const randomise = Math.floor(Math.random() * 16777215).toString(16);
        randomColour = "#" + randomise;
        const position = (document.elementFromPoint(e.clientX, e.clientY));
        const gridId = position.id;
        if (window.rainbow) {
            document.getElementById(`${gridId}`).style.backgroundColor = `${randomColour}`;
            // const headline = document.querySelector('h1');
            // headline.style.color = `${randomColour}`;
        } else {
            document.getElementById(`${gridId}`).style.backgroundColor = `${window.penColour}`;
        }
    }
}, { passive: true })

// paint by clicking
canvas.addEventListener('click', e => {
    const randomise = Math.floor(Math.random() * 16777215).toString(16);
    randomColour = "#" + randomise;
    const position = (document.elementFromPoint(e.clientX, e.clientY));
    const gridId = position.id;
    if (window.rainbow) {
        document.getElementById(`${gridId}`).style.backgroundColor = `${randomColour}`;
        const headline = document.querySelector('h1');
        headline.style.color = `${randomColour}`;

    } else {
        document.getElementById(`${gridId}`).style.backgroundColor = `${window.penColour}`;
    }
}, { passive: true })

// dropdowns for choices and clear button
const dropdown1 = document.querySelector('.size');
const dropdown2 = document.querySelector('.canvascolour');
const dropdown3 = document.querySelector('.pencolour');
const button1 = document.querySelector('.clear');

// change grid size (and reset other dropdowns)
dropdown1.addEventListener('change', (event) => {
    const resetdropdown2 = document.querySelector('.canvascolour');
    resetdropdown2.selectedIndex = 0;
    const canvas = document.querySelector('.canvas');
    const mult = event.target.value * event.target.value;
    canvas.style.gridTemplateColumns = `repeat(${event.target.value}, 1fr)`;
    canvas.style.gridTemplateRows = `repeat(${event.target.value}, 1fr)`;
    canvas.innerHTML = "";
    for (let i = 1; i < (mult + 1); i++) {
        canvas.innerHTML += `<div class="gridfield" id="${i}"</div>`;
    };
});

// change grid colour
dropdown2.addEventListener('change', (event) => {
    const canvas = document.querySelectorAll('.gridfield');
    canvas.forEach(field => {
        if (event.target.value == 'black') {
            field.style.backgroundColor = `${event.target.value}`;
            field.style.borderColor = 'grey';
        } else {
            field.style.backgroundColor = `${event.target.value}`;
            field.style.borderColor = 'black';
        }
    });
});

// change pen colour
dropdown3.addEventListener('change', (event) => {
    if (dropdown3.selectedIndex == 8) {
        window.rainbow = true;
    } else {
        window.rainbow = false;
        window.penColour = `${event.target.value}`;
        const headline = document.querySelector('h1');
        headline.style.color = `${event.target.value}`;
    }
});

// clear grid and reset dropdowns and choices (not grid size)
button1.addEventListener('click', (event) => {
    window.rainbow = false;
    window.penColour = 'black';
    const resetdropdown2 = document.querySelector('.canvascolour');
    resetdropdown2.selectedIndex = 0;
    const resetdropdown3 = document.querySelector('.pencolour');
    resetdropdown3.selectedIndex = 0;
    const headline = document.querySelector('h1');
    headline.style.color = 'black';
    const canvasAll = document.querySelectorAll('.gridfield');
    canvasAll.forEach(field => {
        field.style.backgroundColor = "rgb(223, 223, 223)";
    });
});