I am trying to make a webpage now and I want to show my content with limt of size. For example if width over 1000px and height over 1000 px than Alert page shows up. And if window size is width < 1000 px and height < 1000px than Alert page hidden and content will show. Now I made a that say your screen is too big and makes this full size of webpage And with Javascript I gave a condition that can check size of window and if it feets than class hidden that has display: hidden will add or delete. this is my javascript code

const width = window.innerWidth;
const height = window.innerHeight;

//in the html there is no class: hidden. So alert page is show default.

function removeSizeAlert() {
  const sizeAlert = document.querySelector(".too-bgsm-size");
  sizeAlert.classList.add("hidden");
}

function addSizeAlert() {
  const sizeAlert = document.querySelector(".too-bgsm-size");
  sizeAlert.classList.remove("hidden");
}

function init() {
  if (width < 600 && height > 950) {
    removeSizeAlert();
  } else {
    addSizeAlert();
  }
}

init();

In here I want to make this more interactive. Now this code works only when I represh the page. But I want when page resize than detect the size change event and add or delete class hidden simultaneously. There is a way to do like this?