-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
72 lines (63 loc) · 2.43 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
// Initial state
let size = 16;
let theme = 'black';
// Populate the grid with initial state
drawGrid(size);
// Change canvas and theme coloring by pressing button
document.querySelector('input#size').addEventListener('change', changeCanvas);
document.querySelector('button#reset').addEventListener('click', changeCanvas);
[...document.querySelectorAll('.sketch-option button')].forEach((button) => button.addEventListener('click', setTheme));
function drawGrid(size) {
const $canvas = document.querySelector('#canvas');
const cellSize = $canvas.clientWidth / size;
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
let cell = document.createElement('div');
cell.style.cssText = `width: ${cellSize}px; height: ${cellSize}px;`;
cell.style.float = 'left';
// We use this data variable for the percentage increase of color
cell.dataOpacity = 0;
canvas.appendChild(cell);
}
}
// Add event listener to change color on mouseover
const cells = [...document.querySelectorAll('#canvas div')];
cells.forEach((cell) => cell.addEventListener('mouseover', changeColor));
}
function setTheme(event) {
theme = event.target.id;
document.querySelector('#theme').textContent = (theme == 'reset') ? 'BLACK' : theme.toUpperCase();
}
function changeColor(event) {
const cell = event.target;
switch (theme) {
case 'random':
cell.style.background = getRandomColor();
break;
case 'percent-increase':
// Using a dataOpacity counter to increasca opacity
cell.style.background = 'black';
cell.dataOpacity += 0.1;
cell.style.opacity = cell.dataOpacity;
default:
cell.style.background = 'black';
}
}
function changeCanvas(event) {
const $canvas = document.querySelector('#canvas');
const $inputSize = document.querySelector('input#size');
let size = event.target.value;
// If the size is too big will make the browser crash
if (size < 2 || size > 80) {
confirm('Please select a number betwenn 2 and 80');
size = 16;
}
// Removing old cells
$canvas.textContent = '';
// Updating the input field (used it for the Reset option to work with the same function)
$inputSize.value = size;
drawGrid(size);
}
function getRandomColor() {
return "#"+((1<<24)*Math.random()|0).toString(16);
}