JSFiddle - React, Tailwind, and code Playground

by Yurii Predborskyi

HTML

<!-- 1. Создать блок с координатами мышки на экране, когда пользователь водит мышкой, значения в блоке должны меняться; (http://javascript.ru/tutorial/events/properties#koordinaty-myshi:-clientx-y-pagex-y)
2. Создать в центре экрана квадрат, и управлять его передвижением нажатиями стрелочек на клавиатуре
то есть: при нажатии на кнопку вверх крадрат перемещается на 20px вверх и т д -->
<div id="coordinates">
    <h2>Координаты мышки</h2>
  <div class="small">
   Относительно окна
    <p>Координата Х: <span id="mouseX">0</span></p>
    <p>Координата Y: <span id="mouseY">0</span></p>
  </div>
  <div class="small">
  Относительно границ блока
    <p>Координата Х: <span id="mouseXbox">0</span></p>
    <p>Координата Y: <span id="mouseYbox">0</span></p>
  </div>
</div>
<div class="clearfix">

</div>
<div id="box">
  <div id="move" style="top: 190px; left: 190px;">

  </div>
</div>

CSS

.small {
  width: 200px;
  float: left;
}

#box {
  position: relative;
  height: 400px;
  width: 400px;
  border: 2px solid black;
}

#move {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: skyblue;
}

.clearfix {
  clear: both;
}

JavaScript

function mouseShowHandler(e, config) {
  var base = {};
  var block = document.getElementById(config.blockId);
  if (block) {
    base = getCoords(block);
  } else {
    base = {
      top: 0,
      left: 0
    };
  }
  e = (e || window.event);
  if (e.pageX == null && e.clientX != null) {
    var html = document.documentElement;
    var body = document.body;
    e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
    e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
  }
  document.getElementById(config.xId).innerHTML = e.pageX - base.left;
  document.getElementById(config.yId).innerHTML = e.pageY - base.top;
}

function getCoords(elem) { // crossbrowser version
  var block = elem.getBoundingClientRect();

  var body = document.body;
  var docEl = document.documentElement;

  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
  var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

  var clientTop = docEl.clientTop || body.clientTop || 0;
  var clientLeft = docEl.clientLeft || body.clientLeft || 0;

  var top = block.top + scrollTop - clientTop;
  var left = block.left + scrollLeft - clientLeft;

  return {
    top: Math.round(top),
    left: Math.round(left)
  };
}

var config = {
  xId: "mouseX",
  yId: "mouseY",
}

var configBox = {
  xId: "mouseXbox",
  yId: "mouseYbox",
  blockId: "box"
}

document.addEventListener("mousemove", function(e) {
  e = e || window.event;
  mouseShowHandler(e, config);
});

var block = document.getElementById("box");
block.addEventListener("mousemove", function(e) {
  e = e || window.event;
  mouseShowHandler(e, configBox);
});

document.addEventListener("keydown", function(e) {
  e = e || window.event;
  var move = document.getElementById("move");
  switch (e.keyCode) {
    case 37:
      if ((parseInt(move.style.left) - 20) < 0) {
        move.style.left = 0 + "px";
      } else...