<div>dummy text</div>
<div>dummy text</div>
<div>dummy text</div>
<div>dummy text</div>
<div>dummy text</div>
<div>dummy text</div>
<div class="target-box">
  <span>target</span>
</div>

<div class="info">
  <ul>
    <li>clientX : <span class="clientX">0</span>px</li>
    <li>clientY : <span class="clientY">0</span>px</li>
    <li>offsetX : <span class="offsetX">0</span>px</li>
    <li>offsetY : <span class="offsetY">0</span>px</li>
    <li>pageX : <span class="pageX">0</span>px</li>
    <li>pageY : <span class="pageY">0</span>px</li>
    <li>screenX : <span class="screenX">0</span>px</li>
    <li>screenY : <span class="screenY">0</span>px</li>
  </ul>
</div>

@font-face {
  font-family: "YdestreetL";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/YdestreetL.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "YdestreetL";
  background-color: lightgreen;
}

.target-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 500px;
}

.target-box span {
  display: inline-block;
  padding: 10px;
  color: white;
  background-color: darkgreen;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
  margin: 10px;
}

const target = document.querySelector(".target-box span");
target.addEventListener("mousemove", (e) => {
  document.querySelector(".clientX").innerText = e.clientX;
  document.querySelector(".clientY").innerText = e.clientY;
  document.querySelector(".offsetX").innerText = e.offsetX;
  document.querySelector(".offsetY").innerText = e.offsetY;
  document.querySelector(".pageX").innerText = e.pageX;
  document.querySelector(".pageY").innerText = e.pageY;
  document.querySelector(".screenX").innerText = e.screenX;
  document.querySelector(".screenY").innerText = e.screenY;
});