-
Notifications
You must be signed in to change notification settings - Fork 0
/
designs.js
51 lines (40 loc) · 1.66 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// creating a variable to access table tag
let table = document.getElementById( 'pixelCanvas' );
// assigning chosen color to colorPicker
let colorPicker = document.getElementById( 'colorPicker' );
function makeGrid(tableHeight, tableWidth) {
// creating custom table with width and height given in the form
for (let i=0; i<tableHeight; i++)
{
// creating a table row, <tr> element
let row = document.createElement('tr');
for (let j=0; j<tableWidth; j++)
{
// creating a <td> element, cell
let col = document.createElement('td');
// appending it to tr element
row.appendChild(col);
}
//appending tr element to the table
table.appendChild(row);
}
//printing size of the grid to console
console.log( 'inside makeGrid: ', tableWidth, tableHeight );
};
document.getElementById('colorPicker').addEventListener('change', function() {
colorPicker = document.getElementById('colorPicker');
} );
document.getElementById('pixelCanvas').addEventListener('click', function(evt) {
evt.target.style.backgroundColor = colorPicker.value;
}, false );
document.getElementById('pixelCanvas').addEventListener('dblclick', function(evt) {
console.log( 'double click' );
evt.target.style.backgroundColor = '';
}, false );
document.getElementById( 'submitButton' ).addEventListener( 'click', function(evt){
evt.preventDefault();
// assigning height and width from input form
const tableHeight = document.getElementById( 'inputHeight' ).value;
const tableWidth = document.getElementById( 'inputWidth' ).value;
makeGrid(tableHeight,tableWidth);
} );