1

I am asked to make a pixel art maker that makes a table and let's the user color the cells by clicking on them. I made it, and it passed 4 tests but in the last one it tells me" Pixel Art Project works correctly with randomly sized tables Timed out retrying: Too many elements found. Found '3', expected '2'." even though it works correctly when I put random height and width.
here's my code:

var sumb = document.querySelector('#sizePicker [type="submit"]');
document;

var table = document.querySelector("#pixelCanvas");
var colpik = document.querySelector("#colorPicker");

function makeGrid() {
 
  var hieght = document.querySelector("#inputHeight").value;
  var width = document.querySelector("#inputWidth").value;

  for (var row = 0; row < hieght; row++) {
    tr = document.createElement("tr");
    for (var cell = 0; cell < width; cell++) {
      td = document.createElement("td");
      tr.insertAdjacentElement("afterbegin",td)
    }
    table.insertAdjacentElement("afterbegin",tr)
  }
}

sumb.addEventListener("click", function (event) {
  event.preventDefault();
});
sumb.addEventListener("click", makeGrid);

table.addEventListener("click", function (event) {
  if (event.target.tagName === "TD") {
    var colval = document.querySelector("#colorPicker").value;
    event.target.style.backgroundColor = colval;
  }
});
body {
  text-align: center;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type="number"] {
  width: 6em;
}
<!DOCTYPE html>
<html>

<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>
</body>

</html>
Ahmed-e
  • 11
  • 3

0 Answers0