Cursor Coordinates

<div class="coordinates__inner" data-coordinates-wrap>
  <p class="coordinates__p">X:<span data-coordinates-x>0</span>px</p>
  <p class="coordinates__p">Y:<span data-coordinates-y>0</span>px</p>
</div>

.coordinates__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.coordinates__p {
  font-family: "Haffer Mono", monospace;
  font-size: 1em;
  line-height: 1.25;
  text-transform: uppercase;
}

function initCursorCoordinates() {
  const xEl = document.querySelector('[data-coordinates-x]');
  const yEl = document.querySelector('[data-coordinates-y]');

  if (!xEl || !yEl) return;

  document.addEventListener('mousemove', (event) => {
    xEl.textContent = Math.round(event.pageX);
    yEl.textContent = Math.round(event.pageY);
  });
}

// Initialize Cursor Coordinates
document.addEventListener("DOMContentLoaded", () => {
  initCursorCoordinates();
});