Quick HTML/CSS/JS editor

quick-editor.html

<title>
  WebCode.run Editor
</title>

<style>
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
}
.editor {
  width: 100vw;
  height: 100vh;
  /*border: 3px solid black;*/

  display: flex;

}
.col {
  flex: 1;

  display: flex;
  flex-direction: column;

}
textarea {
  flex: 1;

  font-size: 1.5em;
  font-family: monospace;
}
</style>
<div id="topbar">
  <button onclick="load()">Load</button>
</div>
<div class="editor">
  <div class="col">
    <textarea id="html" placeholder="Place your HTML here..."></textarea>
    <textarea id="css" placeholder="Place your CSS here..."></textarea>
    <textarea id="js" placeholder="Place your JavaScript here..."></textarea>
  </div>
  <div class="col">
    <iframe id="preview" frameborder="0"></iframe>
  </div>
</div>

<script>
var html = document.getElementById('html');
var css = document.getElementById('css');
var js = document.getElementById('js');

function save() {
  if (html.value !== "") localStorage["editor::html"] = html.value;
  if (css.value !== "") localStorage["editor::css"] = css.value;
  if (js.value !== "") localStorage["editor::js"] = js.value;
}

function load() {
  html.value = localStorage["editor::html"];
  css.value = localStorage["editor::css"];
  js.value = localStorage["editor::js"];
}

function renderPreview() {

  var preview = document.getElementById('preview');

  var blob = new Blob(["<style>"+css.value+"</style>", html.value, "<script>"+js.value+'<\/script>'], {type: 'text/html'});
  preview.src = URL.createObjectURL(blob);

  save();
}

setInterval(renderPreview, 1000);
renderPreview();

</script>