JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<input id="type" placeholder="Content-Type" />
<textarea id="data" placeholder="Input"></textarea>
<textarea id="output" placeholder="Output"></textarea>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

input, textarea {
  border: 1px solid #ccc;
  outline: none;
  padding: 15px;
  font-size: 18px;
  width: 100%;
  display: block;
  position: absolute;
}
#type {
  height: 40px;
}

#data {
  top: 39px;
  height: calc(80% - 39px);
}

#output {
  font-size: 10px;
  top: calc(80% - 1px);
  height: calc(20% + 1px);
}

JavaScript

const $type = document.querySelector('#type'),
		$data = document.querySelector('#data'),
    $output = document.querySelector('#output');

const change = debounce(() => {
	$output.value = `data:${$type.value};base64,${btoa($data.value)}`;
}, 5);

[$type, $data, $output].forEach($element => {
  $element.addEventListener('change', change);
  $element.addEventListener('keyup', change);
  $element.addEventListener('keydown', change);
});

$output.addEventListener('focus', function () {
	this.select();
});

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);
	};
};