JSFiddle - React, Tailwind, and code Playground

by zerippe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<ul id="mode">
<li><input type="radio" name="mode" value="escape" id="escape" checked="checked">
<label for="escape">Escape</label></li>
<li><input type="radio" name="mode" value="unescape" id="unescape">
<label for="unescape">Unescape</label></li>
</ul>
<div>
  <h2>Input:</h2>
  <textarea id="input"></textarea>
</div>
<div>
  <h2>Output:</h2>
  <textarea id="output"></textarea>
</div>

CSS

textarea{
  width: 100%;
  height: 200px;
}

#mode{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
#mode li{
    list-style: none;
     -webkit-flex-grow: 1;
    flex-grow: 1;
}

JavaScript

var input = document.getElementById("input");
var output =  document.getElementById("output");
var escapeRadio = document.getElementById("escape");
var unescapeRadio = document.getElementById("unescape");

var getFunc = function(){
	var isEscape = escapeRadio.checked;
  return isEscape ? _.escape : _.unescape;
};

var changeLinster = function(){
  setTimeout(function(){
    output.value = getFunc()(input.value);
  },10);
};

input.addEventListener("change", changeLinster, false);
input.addEventListener("keyup", changeLinster, false);
input.addEventListener("keydown", changeLinster, false);
input.addEventListener("paste", changeLinster, false);
escapeRadio.addEventListener("click", changeLinster, false);
unescapeRadio.addEventListener("click", changeLinster, false);