Advanced JavaScript by Kyle Simpson

Advanced JavaScript by Kyle Simpson

by Rishabh Sharma

HTML

<div id="rect">
</div>

<div id="controls">
  <div id="left">

  </div>
  <div id="right">

  </div>
</div>

CSS

#rect {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  background-color: red;
}

#left,
#right {
  display: inline-block;
  margin-top: 100px;
  height: 20px;
  width: 20px;
  background-color: lightgray;
}

JavaScript

var rect = document.getElementById('rect');
var lPos = 100,
  rPos = 0;
var mouseTimer;
rect.style.left = lPos + 'px';
rect.style.right = rPos + 'px';

document.getElementById('left').addEventListener('mousedown', leftStart);
document.getElementById('left').addEventListener('mouseup', leftEnd);
document.getElementById('right').addEventListener('mousedown', rightStart);
document.getElementById('right').addEventListener('mouseup', rightEnd);

function leftStart() {
  mouseTimer = setInterval(function() {
    rect.style.left = lPos - 1 + 'px';
    rect.style.top = 
    lPos -= 1;
    console.log('left', lPos);
  }, 10);

}

function leftEnd() {
  clearTimeout(mouseTimer);
}

function rightStart() {
  mouseTimer = setInterval(function() {
    rect.style.left = lPos + 1 + 'px';
    lPos += 1;
  }, 10);
}

function rightEnd() {
  clearTimeout(mouseTimer);
}