-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
126 lines (97 loc) · 2.76 KB
/
app.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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
const gridContainer = document.getElementById('grid-container');
const gridItems = [];
const saveBtn = document.getElementById('btn-info');
const changeBtn = document.getElementById('btn-change');
const clearBtn = document.getElementById('btn-clear');
const modalContainer = document.getElementById('modal-container');
const modalClose = document.getElementById('close');
function run(size) {
//default grid size
if (size === undefined) {
size = 16;
}
makeGrid(size, size);
addSketchEffects(gridItems);
}
/* Core functions and listeners */
function addSketchEffects(gridItems) {
gridItems.forEach(item => {
item.addEventListener('mouseover', () => {
item.style.backgroundColor = "#f8c7cc";
})
});
}
gridContainer.addEventListener("mousedown", function () {
window.addEventListener("mousemove", drag);
window.addEventListener("mouseup", lift);
function drag() {
//when the person drags their mouse while holding the mouse button down
gridItems.forEach(item => {
item.addEventListener('mouseover', () => {
item.style.backgroundColor = "";
})
});
}
function lift() {
//when the person lifts mouse
addSketchEffects(gridItems);
//delete event listeners so that it doesn't keep saying drag
window.removeEventListener("mousemove", drag)
window.removeEventListener("mouseup", this)
}
});
saveBtn.addEventListener('click', openModal);
changeBtn.addEventListener('click', changeGrid);
clearBtn.addEventListener('click', clearGrid);
modalClose.addEventListener('click', closeModal);
/* Grid Functions */
function makeGrid(rows, cols) {
gridContainer.style.setProperty('--grid-rows', rows);
gridContainer.style.setProperty('--grid-cols', cols);
for (c = 0; c < (rows * cols); c++) {
let cell = document.createElement("div");
gridContainer.appendChild(cell).className = "grid-item";
gridItems.push(cell);
};
};
function deleteGrid() {
gridItems.forEach(item => {
item.remove();
})
}
function clearGrid() {
gridItems.forEach(item => {
item.style.backgroundColor = "";
})
}
function changeGrid(msg) {
let size;
if (msg && typeof msg === 'string') {
size = prompt(msg);
} else {
size = prompt('Choose a number from 1 to 100:');
}
if (size > 100 || size == '' || size % 1 != 0) {
//call function until cancel or valid number
changeGrid('Please try a different number:');
} else if (size) {
deleteGrid();
run(size);
} else {
//user canceled prompt, do nothing
}
}
/* Modal functions */
function openModal() {
modalContainer.style.display = 'block';
}
function closeModal() {
modalContainer.style.display = 'none';
}
window.onclick = function (event) {
if (event.target == modalContainer) {
closeModal();
}
}
//initialize app
run();