// Select color input
const colorPicker = document.getElementById('colorPicker');

// Select size input
const sizePicker = document.getElementById('sizePicker');

// When size is submitted by the user, call makeGrid()
document.querySelector('input[type="submit"]').addEventListener('click', SubmitButton);
function SubmitButton(event){
  event.preventDefault();
  makeGrid();
}
function makeGrid() {
  const grid = document.getElementById('pixelCanvas');
  var height = document.getElementById('inputHeight').value;
  var width = document.getElementById('inputWidth').value;
// Create Grid
grid.innerHTML=null; //resets the grid
  for (var v = 0; v < height; v++){
    var row = document.createElement('tr')
    row.id = 'row-' + v;// not sure I understand perfectly this
    grid.appendChild(row);
    for(var h = 0; h < width; h++){
      var col = document.createElement('td')
      col.id = 'row-' + row + '-' + h;
      grid.lastChild.appendChild(col);
    }
  }
}
//Trouble puting the colors in the squares and not sure how to create a code to put back a blanlk square if error