Odin project etch a sketch - resizing grid

Question

Okay so my intent was to make a button which creates a pop up which asks you how many squares you would like to resize the grid by, once the user has entered the number the grid should be generated in the same total space as before (which should be 960px), i have got the grid to resize but it doesnt stay in the same total space as before, and if you add too many squares it seems to totally freak out, here is the link - https://codepen.io/codeChimp88/pen/zzMrjx to the codepen, if you need any more info let me know, any pointers to the information i should be looking at would be appreciated, also any criticism and what i should be looking to improve is welcome (i am a beginner), code below!

html -

<h1>Etch a Sketch Pad</h1>

<div class="cont">
<button class="but">Clear Pad</button>
  <button class="but" id="resize">Resize</button>
</div>  

<div class="container">
</div>

css -

.squares {
  background-color: black;
  border: solid 1px black;
  display: inline-block;
  width: 20px;
  height: 20px;

  color: transparent;
}

.black {
  background-color: black;
}

.container {
  text-align: center;
  border: solid 20px red;
  background-color: red;
  height: 100%;
  width: 100%;


}

h1 {
  text-align: center;
  font-size: 50px;


}

.but {
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: red;
  font-size: 20px;
  margin: 10px;
  border-radius: 10px;

}

.cont {
  text-align: center;
  margin: 20px;

}

jQuery -

$(document).ready(function () {

    var $grid = $('.container');

for (i = 0; i < 16; i++) 
{
    var row = '<div>';

    for (j = 0; j < 16; j++)
        row += '<div class="squares">' + j + '</div>';

    row += '</div>';

    $grid.append(row);
}

  $('.squares').mouseenter(function() {
    $(this).css("background-color", "white");
  });

  $('.but').click(function() {
    $('.squares').css("background-color", "black");
  });

  $('#resize').click(function() {
    $('.squares').remove();
    $('.container').append('<table></table>');
    var gridsize = prompt('How big would you like to make the grid?');


    var $grid = $('.container');

for (i = 0; i < gridsize; i++) 
{
    var row = '<div>';

    for (j = 0; j < gridsize; j++)
        row += '<div class="squares">' + j + '</div>';

    row += '</div>';


    $('.squares').width(960/gridsize);
    $('.squares').height(960/gridsize);

    $grid.append(row);

  $('.squares').mouseenter(function() {
    $(this).css("background-color", "white");
  });

}

  });




});

Answer 1

First off,

  # Here, you are resizing every squares that already exists on the DOM.  
  #Problem : at this time, you did not appended your row yet, so that $('.squares') does not take into account the .squares existing in your row.
  $('.squares').width(960/gridsize);
  $('.squares').height(960/gridsize);

  $grid.append(row);

For better perfs, I'd advise you to resize your .squares elements outside of your for loops. You'll gain many seconds for a simple 150x150 grid

$('#resize').click(function() {
  $('.squares').remove();
  $('.container').append('<table></table>'); // Actually you don't use that
  var gridsize = prompt('How big would you like to make the grid?');


  var $grid = $('.container');

  for (i = 0; i < gridsize; i++) 
  {
  var row = '<div>';

  for (j = 0; j < gridsize; j++)
    row += '<div class="squares">' + j + '</div>';

  row += '</div>';

  $grid.append(row);

  }

  $('.squares').mouseenter(function() {
    $(this).css("background-color", "white");
  });

  $('.squares').width(960/gridsize);
  $('.squares').height(960/gridsize);  
});

This should solve your last line issue.

Second, when the grid elements are too small, your line-height becomes a problem.

.container div{
  line-height: 0
}

This should solve your space between lines problem.

Last, the fact that your grid is bigger than you'd wan't it to is related to two things : you have a border on your squares that add some width to the .squares elements you don't take into account when you resize your elements and, 960/gridsize might certainly give you a rounded value that breaks your grid size

I'm not certain i got your problem right, so tell me if i missed something