Pixel Art Maker 2nd try - Juan Carlos Sanchez

// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()
// Variables
const submitButton = document.querySelector('input[type="submit"]');
const gridHeight = document.getElementById('inputHeight').value;
const gridWidth = document.getElementById('inputHeight').value;
const cellColor = document.getElementById('colorPicker').value;

function makeGrid() {
// Your code goes here!
// Here's where we build the grid of #rows x #columns

for (var rowNumber = 1; rowNumber < gridHeight+1; rowNumber++) {
  let row = document.createElement('tr');
  row.setAttribute("id", "tr"+rowNumber);
  pixelCanvas.appendChild(row);
  for (var colNumber = 1; colNumber < gridWidth+1; colNumber++) {
    let column = document.createElement('td');
    column.setAttribute("id", "td"+colNumber);
    row.appendChild(column);
    column.addEventListener('click', cellColoring);
    }
  }
}

// Add color to those grid squares "clicked" by the user
function cellColoring(event) {
  let cellPicker = document.querySelector('tr'+rowNumber,'td'+colNumber);
  cellPicker.addEventListener('click', cellColoring);
  cellPicker.style.backgroundColor = cellColor;
}

//If there are colored squares in the grid, clicking the "submit" button clears
//them out
submitButton.addEventListener('click', function(event){
  event.preventDefault();
  makeGrid()
})