JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<textarea name="code" id="code" cols="30" rows="10"></textarea>
<div id="result"></div>

JavaScript

storage = localStorage;

var codeElem = document.getElementById("code"),
    resultElem = document.getElementById("result");


var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = decodeURIComponent(pair[1]);
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(decodeURIComponent(pair[1]));
    }
  } 
    return query_string;
}();

console.log(QueryString.p == "input");

if(QueryString.p == "input") {
    resultElem.style.display = "none";
	codeElem.onkeyup = codeElem.onkeydown = codeElem.onchange = function() {
        localStorage.setItem('code', codeElem.value);
    }
} else {
    codeElem.style.display = "none";
    window.addEventListener('storage', function(e) {
        resultElem.innerHTML = localStorage.getItem('code');
        codeElem.value = localStorage.getItem('code');
    });
}