js practice 1

by oganez09

HTML

<div id="app">
  <div class="square" id="square" style="width: 100px;height: 100px;background-color: #1c1c1c;position: absolute;top: 0;left: 0;z-index: 9999;"></div>
</div>

<button type="button" class="btn" id="saveBtn">Save</button>

CSS

.btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

JavaScript

const $app = document.getElementById('app');
const $btn = document.getElementById('saveBtn');

const $square = $app.querySelector('#square');

$square.addEventListener('mousedown', event => {
  const cursorPositionX = event.offsetX;
  const cursorPositionY = event.offsetY;

  document.onmousemove = event => {
    const moveX = event.pageX - cursorPositionX + 'px';
    const moveY = event.pageY - cursorPositionY + 'px';

    $square.style.left = moveX;
    $square.style.top = moveY;
  };

  document.onmouseup = () => {
    document.onmousemove = null;
  }
});

$btn.addEventListener('click', () => {
  const result = $app.innerHTML.trim();
  console.log(result)
});