trying to resize a grid of divs for the etch-a-sketch assignment from the odinproject

first off, I already know that a lot of this JavaScript could have been done in the HTML.

Anyways, my issue is that I can create my initial 16x16 grid of divs (thanks stackoverflow!) but I can't resize the grid using my "More" button.

the instructions say to throw up a prompt to ask the user to input a number and then use that number for the amount of divs along one side, but I don't want to do it that way. I want to use my "More" button to increase the density of divs - an event listener for clicks (maybe dblclicks too) and then keep adding divs as the user keeps clicking the button. And then decrease with the "Less" button. But don't tell me how to do that part. I can figure it out once the "More" button works.

Some people have been using a slider bar to increase the number of divs, but I haven't been able to translate that code into using a button.

I had it working the other day but my color buttons stopped working.

Any ways, I'm still psyched on learning this stuff but getting kinda irked at not being able to figure this out

I'm assuming I need to implement a "counter" function that keeps track of the number of button clicks and then input that number into my "makeDivs" function?

My "moreDivs" function calls a function, killDivs(), that does away with the pre-existing divs. Am I on the right track there? Do I need to wipe out the pre-existing divs? Or can I just add to the divs that are already there?

I hate to just dump my whole js file on here but...

const btnContainer = document.createElement("div");
btnContainer.classList.add("btn-container");

const resetBtn = document.createElement("button");
resetBtn.textContent = "Reset";

const eraserBtn = document.createElement("button");
eraserBtn.textContent = "Eraser";

const moreBtn = document.createElement("button");
moreBtn.textContent = "More";

const lessBtn = document.createElement("button");
lessBtn.textContent = "Less";

const whiteBtn = document.createElement("button");
whiteBtn.textContent = "White";

const blackBtn = document.createElement("button");
blackBtn.textContent = "Black";

const colorBtn = document.createElement("button");
colorBtn.textContent = "Color";

btnContainer.append(
  resetBtn,
  eraserBtn,
  moreBtn,
  lessBtn,
  whiteBtn,
  blackBtn,
  colorBtn
);

const h1 = document.getElementsByTagName("h1");
h1[0].insertAdjacentElement("afterend", btnContainer);

const btns = document.querySelectorAll("button");
btns.forEach((btn) => {
  btn.className = "btn";
  btn.addEventListener("click", () => {
    switch (btn) {
      case resetBtn:
        resetDivs();
        break;
      case eraserBtn:
        eraseDivs();
        break;
      case moreBtn:
        moreDivs();
        break;
      case lessBtn:
        lessDivs();
        break;
      case whiteBtn:
        whiteDivs();
        break;
      case blackBtn:
        console.log("hi");
        blackDivs();
        break;
      case colorBtn:
        changeColor();
        break;
    }
  });
});

var num = 16;

function makeDivs(num) {
  container.style.display = "grid";
  container.style.gridTemplateRows = `repeat(${num}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${num}, 1fr)`;
  for (let i = 0; i < num * num; i++) {
    const square = document.createElement("div");
    square.className = "square";
    container.append(square);
  }
}

makeDivs(num);

const squares = document.querySelectorAll(".square");

function resetDivs() {
  squares.forEach((square) => {
    square.style.background = "beige";
  });
}

function eraseDivs() {
  squares.forEach((square) => {
    square.addEventListener("pointerover", () => {
      square.style.background = "beige";
    });
  });
}

moreBtn.addEventListener("click", (event, num) => {
  let clicks = num++;
  event.stopPropagation();
});

moreBtn.addEventListener("dblclick", (event, num) => {
  let clicks = num + 3;
  event.stopPropagation();
});

moreBtn.onclick = counter;
moreBtn.ondblclick = counter;

function counter() {
  num += 3;
}

function moreDivs(event, num) {
  let clicks = num + 3;
  event.stopPropagation();
  console.log(clicks);
  killDivs();

  makeDivs(clicks);
}

function lessDivs() {
  console.log("are there less divs yet?");
}

function whiteDivs() {
  squares.forEach((square) => {
    square.addEventListener("pointerover", () => {
      square.style.background = "white";
    });
  });
}

function blackDivs() {
  squares.forEach((square) => {
    square.addEventListener("pointerover", () => {
      square.style.background = "black";
    });
  });
}

function changeColor() {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  const randomColor = `rgb(${r}, ${g}, ${b})`;

  squares.forEach((square) => {
    square.addEventListener("pointerover", () => {
      square.style.background = randomColor;
    });
  });
}

function killDivs() {
  while (container.firstChild) {
    container.removeChild(container.firstChild);
  }
}
//       ***NOTE TO SELF***            see:
//  @chewdev on github for touchevent code example

And my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-A-Sketch</title>
    <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
    <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">  -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1 class="title">Etch-A-Sketch</h1>
    <div id="container">
    </div>
    <script src="./main.js"></script>
</body>
</html>

* {
  /* box-sizing: border-box; */
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: rgb(233, 196, 137);
  font-size: 2.5em;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.title {
  font-family: "Fredericka the Great", cursive;
  font-size: 6rem;
  letter-spacing: 3px;
  text-align: center;
  padding: 20px 0 5px;
  color: maroon;
}

.btn-container {
  border-bottom: 3px solid maroon;
  border-top: 3px solid maroon;
  height: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5%;
}

.btn {
  font-size: 1.1rem;
  color: maroon;
  letter-spacing: 1px;
  font-weight: bold;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  border: 2px solid maroon;
  border-radius: 10px;
  width: 5em;
  height: 2.25em;
}

#container {
  margin: 1em auto 0;
  height: 512px;
  width: 512px;
  border-top: 2px solid maroon;
  border-left: 2px solid maroon;
  border-right: 3px solid maroon;
  border-bottom: 3px solid maroon;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.35);
}

.square {
  border-top: 1px solid maroon;
  border-left: 1px solid maroon;
  background: beige;
}