mouse.js

(() => {
  const x = document.createElement("div");
  x.style.height = "1px";
  x.style.backgroundColor = "red";
  x.style.zIndex = 100000;
  x.style.position = "fixed";
  x.style.top = "0px";
  x.style.left = "0px";
  document.body.appendChild(x);

  const y = document.createElement("div");
  y.style.width = "1px";
  y.style.backgroundColor = "red";
  y.style.zIndex = 100000;
  y.style.position = "fixed";
  y.style.top = "0px";
  y.style.left = "0px";
  document.body.appendChild(y);

  const text = document.createElement("div");
  text.style.color = "red";
  text.style.zIndex = 100000;
  text.style.position = "fixed";
  document.body.appendChild(text);

  function drawCoordinate(event) {
    const { clientX, clientY } = event;
    x.style.width = clientX + "px";
    x.style.top = clientY + "px";

    y.style.height = clientY + "px";
    y.style.left = clientX + "px";

    text.style.top = clientY - 20 + "px";
    text.style.left = clientX + 20 + "px";
    text.innerText = `(x: ${clientX}, y: ${clientY})`;
  }

  document.body.addEventListener("mousemove", drawCoordinate);
})();