Simple & Easy HTML Entities Converter

by Anov Siradj

HTML

<textarea id=input autofocus></textarea>
<textarea id=output></textarea>
<div id=between hidden></div>

CSS

html,
body,
textarea,
* {
  margin: 0;
  padding: 0;
  border: none;
}

html,
body {
  width: 100%;
  height: 100%;
  /* text-align: center; */
}

textarea {
  width: 49%;
  height: 99%;
  border: none;
  resize: none;
}

JavaScript

// http://stackoverflow.com/a/29482788/3036312
(() => {
  var temp = document.getElementById('between'),
      input = document.getElementById('input'),
      output = document.getElementById('output');

  input.value = '< & >';
  input.addEventListener('input', debounce(function(ev) {
    temp.textContent = this.value;
    output.value = temp.innerHTML;
  }, 250));
  input.dispatchEvent(new Event('input'));

  // https://davidwalsh.name/javascript-debounce-function
  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this, args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  }
})();