Resizable container

by João Vitor Scheuermann

HTML

<div class="container">
  <div class="resizer"></div>
  <div class="texto">
    CLICK AND DRAG THE BAR
  </div>
</div>

SCSS

* {
  padding: 0;
  margin: 0;
  
  font-family: 'Roboto-Thin';
  letter-spacing: 5px;
}

html, body {
  width: 100%;
  height: 100%;
}

.container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: #ffffff;

  > .resizer {
    width: 100%;
    height: 5px;
    background: #000000;
    cursor: row-resize;
  }
  > .texto {
    margin: 10px 0 0 0;
    width: 100%;
    text-align: center;   
    color: #000000;
  }
}

JavaScript

let ref = document.querySelector('.resizer')
let target = document.querySelector('.container')


function resizer(resizer, target) {
  var startY, startHeight;

  resizer.addEventListener('mousedown', initDrag, false)

  function initDrag(e) {
    startY = e.clientY;
    startHeight = parseInt(document.defaultView.getComputedStyle(target).height, 10);
    document.documentElement.addEventListener('mousemove', doDrag, false);
    document.documentElement.addEventListener('mouseup', stopDrag, false);
  }

  function doDrag(e) {
    target.style.height = (startHeight - e.clientY + startY) + 'px';
  }

  function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
  }
}

resizer(ref, target)