// Select color input

const colorInput = document.querySelector("#colorPicker");

// Select size input

const gridHeight = document.querySelector('#inputHeight');
const gridWidth = document.querySelector('#inputWidth');
const tabel = document.querySelector('#pixelCanvas');

// When a box is clicked, color it in

const color = colorInput.value;

// When size is submitted by the user, call makeGrid()

function makeGrid() {
// Your code goes here!
tabel.innerHTML = '';

// Create fragment to build the rows and columns on

const fragment = document.createDocumentFragment();

for (let x = 0; x < gridHeight.value; x++) {

const tr = document.createElement('tr');

for (let y = 0; y < gridWidth.value; y++) {

const td = document.createElement('td');
tr.appendChild(td);
}

tr.addEventListener('click', function(event){
event.target.style.backgroundColor = color;
});
fragment.appendChild(tr);
}
// Push fragment onto DOM
tabel.appendChild(fragment);
};

document.querySelector('form').addEventListener('submit', function(event){
event.preventDefault();
makeGrid();
});