forked from udacity/project-pixel-art-maker-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
designs.js
35 lines (31 loc) · 1.18 KB
/
designs.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
// Select color input
// Select size input
// When size is submitted by the user, call makeGrid()
function makeGrid() {
const table = document.getElementById('pixelCanvas');
// Getting the values of hight and width from user inputs
const hight = document.getElementById('inputHeight').value;
const width = document.getElementById('inputWidth').value;
table.innerHTML = '';
// Creating the grid which is composed of rows filled with cells
for (let i = 0; i < hight; i++) {
const row = table.insertRow(i);
for (let x = 0; x < width; x++) {
row.insertCell(x);
}
}
};
// An event to respond when the user submits the form to make the grid
const form = document.getElementById('sizePicker');
form.addEventListener('submit', function (evt) {
evt.preventDefault();
makeGrid();
});
// An event to apply the picked color to the chosen cell via a click
const table = document.getElementById('pixelCanvas');
table.addEventListener('click', function (evt) {
if (evt.target.nodeName.toLowerCase() === 'td') {
const color = document.getElementById('colorPicker').value;
evt.target.style.backgroundColor = color;
}
});