I am following this guide in creating adding and removing grid item. However, is it possible to prevent it from creating beyond a fix canvas size?

for example, my canvas height is 300px, so when i click the add item button, no element will be created.

This is my current function that check for the desired height

warningMessage = () => {
    var chart = document.getElementsByClassName("graph");
    var largestYvalue = "";

    for (var i = 0; i < chart.length - 1; i++) {
      var firstElement = parseInt(
        chart[i].style.transform.replace(/[\(\)]/g, "").split(",")[1]
      );
      var EachElement = parseInt(
        chart[i + 1].style.transform.replace(/[\(\)]/g, "").split(",")[1]
      );

      if (EachElement > firstElement) {
        largestYvalue = EachElement;
      }
    }

    if (largestYvalue >= 300) {
      alert("it is going beyond the canvas");
    }
  };

The canvas is define in my styles.css

.DetailLocationContainer {
  background-color: red;
  width: 100px;
  height: 300px;
  /* margin: 2% auto auto auto; */
  background-image: repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
  background-size: 50px 50px;
}

Grid item will be created after the alert, but what I trying to do it, to have the alert without creating the grid item

This is my codesandbox