<main>
  <section id="scroll" class="top left">
    <p>Scroll count: <span id="scroll-count"></span></p>
  </section>
  <section id="resize" class="top right">
    <p>Resize count: <span id="resize-count"></span></p>
  </section>
  <section id="mouseover" class="bottom left">
    <p>Mouseover count: <span id="mouseover-count"></span></p>
  </section>
  <section id="click" class="bottom right">
    <p>Click count: <span id="click-count"></span></p>
  </section>
</main>
<footer>
  <p>
    Pen by <a href="https://www.jemimaabu.com" target="_blank">Jemima Abu</a><span style="color: #D11E15"> &#9829;</span>
  </p>
</footer>

body {
  margin: 0;
  font-family: system-ui, Roboto, Arial, sans-serif;
  font-style: normal;
  font-size: 1.4em;
  line-height: 1.6;
  color: #242424;
}

main {
  height: 300vh;
  display: flex;
}

main section {
  width: 50%;
  height: 50%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

#scroll {
  background-color: #fff;
}

#resize {
  background-color: #f4df4f;
}

#mouseover {
  background-color: #000;
  color: #f1f1f1
}

#click {
  background-color: #7a6f27;
  color: #f1f1f1;
  user-select: none;   
}

footer {
  text-align: center;
  padding: 0.5rem 0;
  background-color: #eaeaea;
  position: relative;
}

footer p {
  font-size: 0.75rem;
  margin: 0.25rem 0;
  color: #221133;
}

footer a {
  text-decoration: none;
  color: inherit;
}

const scroll = document.getElementById('scroll-count');
const resize = document.getElementById('resize-count');
const mouseover = document.getElementById('mouseover-count');
const click = document.getElementById('click-count');

let scrollCount = 0;
let resizeCount = 0;
let mouseoverCount = 0;
let clickCount = 0;

const updateScrollCount = () => {
  scrollCount++;
  scroll.innerHTML = scrollCount;
};

const updateResizeCount = () => {
  resizeCount++;
  resize.innerHTML = resizeCount;
};

const updateMouseoverCount = () => {
  mouseoverCount++;
  mouseover.innerHTML = mouseoverCount;
};

const updateClickCount = () => {
  clickCount++;
  click.innerHTML = clickCount;
};

window.addEventListener("scroll", () => {
  updateScrollCount();
});

window.addEventListener("resize", () => {
  updateResizeCount();
});

window.addEventListener("mouseover", () => {
  updateMouseoverCount()
})

window.addEventListener("click", () => {
  updateClickCount()
})