CODEWITHSUNDEEP
javascript
shadowseercb
shadowseercb

Reputation: 1

Remove grid on reset

I am trying to make the reset button in HTML clear the grid.

The grid does not show up until the width and height are filled with the dimensions which is great and the reset button resets the width and height. I want it to also reset the grid to disappear again.

The grid also gets filled with color boxes when clicked on them.

// When size is submitted by the user, call makeGrid()
$('#sizePicker').submit(function(event) {
  event.preventDefault();
  height = $('#inputHeight').val();
  width = $('#inputWidth').val();
  makeGrid(height, width);
  console.log('Height: ' + height + ' and width: ' + width);
})

/* Adding height and width parameters */
function makeGrid(x, y) {
  /* If any table rows there then remove them */
  $('tr').remove();

  /* height = x then add to i */
  for (var i = 1; i <= x; i++) {
    /* This creates a table row */
    $('#pixelCanvas').append('<tr id=table' + i + '></tr>');
    /* This line finds table one by its id and adds the cell so it can be seen */
    for (var j = 1; j <= y; j++) {
      $('#table' + i).append('<td></td>');
    }
  }

  //add color to cell
  $('td').click(function addColor() {
    /* color placement */
    color = $('#colorPicker').val();
    /* Changes the colors of the boxes */
    if ($(this).attr('style')) {
      /* removes them or else places them */
      $(this).removeAttr('style')
    } else {
      $(this).attr('style', 'background-color:' + color);
    }
  })
}
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;
}
<body>
  <h1>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">
    <input type="reset">
  </form>

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

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

  <!-- Passes on data to the event handler allowing to cancel a function before submitting -->
  <!-- Allowing for the execution of the grid to happen -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="designs.js"></script>


</body>
</html>

Upvotes: 0

Views: 65

Answers (1)

UmairFarooq
UmairFarooq

Reputation: 1315

When reset is submitted by the user, call makeGrid() with zero values.

// When size is submitted by the user, call makeGrid()
$('#sizePicker').submit(function(event) {
  event.preventDefault();
  height = $('#inputHeight').val();
  width = $('#inputWidth').val();
  makeGrid(height, width);

})

// When reset is submitted by the user, call makeGrid()
$('#reset').click(function() {
  makeGrid(0, 0);
})

/* Adding height and width parameters */
function makeGrid(x, y) {
  /* If any table rows there then remove them */
  $('tr').remove();

  /* height = x then add to i */
  for (var i = 1; i <= x; i++) {
    /* This creates a table row */
    $('#pixelCanvas').append('<tr id=table' + i + '></tr>');
    /* This line finds table one by its id and adds the cell so it can be seen */
    for (var j = 1; j <= y; j++) {
      $('#table' + i).append('<td></td>');
    }
  }

  //add color to cell
  $('td').click(function addColor() {
    /* color placement */
    color = $('#colorPicker').val();
    /* Changes the colors of the boxes */
    if ($(this).attr('style')) {
      /* removes them or else places them */
      $(this).removeAttr('style')
    } else {
      $(this).attr('style', 'background-color:' + color);
    }
  })
}
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;
}
<body>
  <h1>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">
    <input id="reset" type="reset">
  </form>

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

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

  <!-- Passes on data to the event handler allowing to cancel a function before submitting -->
  <!-- Allowing for the execution of the grid to happen -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

Upvotes: 1

Related Questions