Feedback for etch-a-sketch project

[FST360]

I created this project as a part of TOP curriculum.
Here is my first finished version:

for (let i = 0; i < 256; i++) {
  $("main").append(`<div id="square${i + 1}" class="square"  ></div>`);
}

$("main > div").hover(
  (event) => {
    $(`#${event.target.id}`).css(
      "background-color",
      `#${rainbowColors[Math.floor(Math.random() * rainbowColors.length)].hex}`
    );
  },
  (event) => {
    $(`#${event.target.id}`).css(
      "background-color",
      `#${rainbowColors[Math.floor(Math.random() * rainbowColors.length)].hex}`
    );
  }
);

$("#reset").click(() => {
  $("main > div").remove();
  // $(".square").removeClass("hover").addClass("removed");

  let userInput = Number(
    prompt(
      "Enter number of squares on one side, length should be between 1 & 100"
    )
  );
  let lengthOfSquare;

  if (!Number.isInteger(userInput)) {
    alert("value was not an integer.");
    return;
  } else if (userInput < 1 || userInput > 100) {
    alert("value was not in between the given range");
    return;
  }

  for (let i = 0; i < Math.round(userInput ** 2); i++) {
    $("main").css("grid-template-columns", `repeat(${userInput}, 1fr)`);
    $("main").css("grid-template-rows", `repeat(${userInput}, 1fr)`);

    $("main").append(`<div id="square${i + 1}" class="square"></div>`);
  }

  $("main > div").hover(
    (event) => {
      console.log(event.target.id);
      $(`#${event.target.id}`).css(
        "background-color",
        `#${
          rainbowColors[Math.floor(Math.random() * rainbowColors.length)].hex
        }`
      );
    },
    (event) => {
      $(`#${event.target.id}`).css(
        "background-color",
        `#${
          rainbowColors[Math.floor(Math.random() * rainbowColors.length)].hex
        }`
      );
    }
  );
});

let rainbowColors = [
  {
    hex: "fac89e",
  },
  {
    hex: "e3e891",
  },
  {
    hex: "c2fc99",
  },
  {
    hex: "a3fcb3",
  },
  {
    hex: "92e8d5",
  },
  {
    hex: "96c8f2",
  },
  {
    hex: "ada8ff",
  },
  {
    hex: "ce94f7",
  },
  {
    hex: "ed94dd",
  },
  {
    hex: "fea8bb",
  },
];

and here is my final version:

// Function for creating the hover effect
let hoverEffect = () => {
  $("main > div").hover(
    (event) => {
      $(`#${event.target.id}`).css(
        "background-color",
        `#${
          rainbowColors[Math.floor(Math.random() * rainbowColors.length)].hex
        }`
      );
    },
    (event) => {
      $(`#${event.target.id}`).css(
        "background-color",
        `#${
          rainbowColors[Math.floor(Math.random() * rainbowColors.length)].hex
        }`
      );
    }
  );
};

// Function for creating the square grid
let createGrid = (input) => {
  $("main").css("grid-template-columns", `repeat(${input}, 1fr)`);
  $("main").css("grid-template-rows", `repeat(${input}, 1fr)`);

  for (let i = 0; i < Math.round(input ** 2); i++) {
    $("main").append(`<div id="square${i + 1}" class="square"></div>`);
  }

  hoverEffect();
};

// creating a 16 x 16 grid of squares
createGrid(16);

// creating the reset button functionality
$("#reset").click(() => {
  $("main > div").remove();

  let userInput = Number(
    prompt(
      "Enter number of squares on one side, length should be between 1 & 100"
    )
  );
  let lengthOfSquare;

  if (!Number.isInteger(userInput)) {
    alert("value was not an integer.");
    return;
  } else if (userInput < 1 || userInput > 100) {
    alert("value was not in between the given range");
    return;
  }

  createGrid(userInput);
});

let rainbowColors = [
  {
    hex: "fac89e",
  },
  {
    hex: "e3e891",
  },
  {
    hex: "c2fc99",
  },
  {
    hex: "a3fcb3",
  },
  {
    hex: "92e8d5",
  },
  {
    hex: "96c8f2",
  },
  {
    hex: "ada8ff",
  },
  {
    hex: "ce94f7",
  },
  {
    hex: "ed94dd",
  },
  {
    hex: "fea8bb",
  },
];

What further improvements can I make?
oh here is the live version on codepen: https://codepen.io/TheFST/pen/mdOJVXx

[jwilkins.oboe]

Hi @FST360 !

I like it.

The only thing I would change is the user input.
Right now, if the user does not comply the message pops up that it was an invalid number but then the grid turns black.

It would be nice if you continued to ask the user for correct input until they complied.
So maybe using a do while would achieve that result.

[FST360]

followed your advice and created a do while loop. Is there a way I can make the if statement in the do while loop more concise?

[jwilkins.oboe]

I think it looks good.
Much better user experience.
I think the if statement is fine