Using jquery variable as CSS property

Issue

forgive me if I'm not asking this properly, I'm new to this site. I'm working on the Etch-a-Sketch project from The Odin Project, some of you may be familiar with it. Basically at this point, what I'm trying to do is resize some divs using a button in jquery, and I wanted to know if it's possible to set a CSS property of those divs (height and width) with a function where I'm using a jquery variable to set the new size.

When I click the New Grid button, I want it to resize the height and width of my divs based on the number I enter in the prompt.

Here's what I have so far:

$("#new_grid").click(function() {

var height = 448 / size;
var width = 448 / size;
var resizePix = function() {
    $(".pixel").css({"height": ???, "width": ???});
        $(".pixel").appendTo("#grid");
    }

var size = prompt("Enter new grid size (10 - 100):");
    if (size < 10) {
        alert("Number is too small.");
    } else if (size > 100) {
        alert("Number is too big.");
    } else if (size >= 10 || size <= 100) {
        resizePix();
        }

What I'm looking to do is have the CSS properties of .pixel reflect the "size" variable that comes from whatever number is entered in the prompt after clicking the button. For example, if I enter 20 when prompted, that should result in dividing 448 (height and width of my container div which holds the divs I'm trying to resize) by 20, and using that value to change the CSS height and width properties.

Am I going about this the right way? I know the resizePix function works because if I just use regular values to change the CSS, the changes are reflected when using the button. I just can't figure out how to get my height and width variables to change the CSS properties.

Solution

Divide inside your function, not outside of it

function resizePix(size) {
  const px = 448 / size; // (P.S: Math.round() could also help?)
  $(".pixel").css({height: px, width: px});
}


$("#new_grid").on("click", function() {

  const size = prompt("Enter new grid size (10 - 100):");

  if (size < 10) {
    alert("Number is too small.");
  } else if (size > 100) {
    alert("Number is too big.");
  } else { 
    resizePix(size);
  }

});

.pixel {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="new_grid">GRID SIZE</button>
<div id="grid">
  <div class="pixel"></div>
</div>

Answered By - Roko C. Buljan