Lodash in-browser JSON transformer

lodash_browser_json_transformer.js

(function() {
  /*
   * LODASH in-Browser JSON transformer
   * Use this in a bookmarket (save its contents in a bookmark) and whenever you open a JSON response (e.g. https://www.reddit.com/.json)
   * you can use it to test lodash methods against the data.
   * Lodash is exposed on window as _ and "json" global variable contains the data within the browser window.
   *
   * Copy the line below and save it as the url of a new bookmark (it's the same code as below but minified for bookmark use): 
   * javascript:!function(){function onScriptLoaded(){window.json=JSON.parse(JSON.stringify(initialJSONCode)),display(window.json),input.addEventListener("input",onInput),document.body.appendChild(input),document.body.appendChild(info)}function onInput(t){if(!t.target.value)return display(initialJSONCode),void setInputState(t.target,"success");var e=wrap(t.target.value);e&&"object"==typeof e?(setInputState(t.target,"success"),display(e)):setInputState(t.target,"error")}function display(t){pre.innerText?pre.innerText=JSON.stringify(t,null,2):pre.textContent=JSON.stringify(t,null,2)}function wrap(t){var e=null;try{e=new Function("return "+t)()}catch(n){}return e}function setInputState(t,e){t.style.backgroundColor="error"===e?ERROR_COLOR:SUCCESS_COLOR}var LODASH_SCRIPT_SRC="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.1.0/lodash.min.js",INFO_TEXT="Test lodash methods (available in this page as _ global variable) against this data. The global variable json holds the JSON value loaded on this page. Empty the text field to return to the inital JSON value.",PLACEHOLDER_TEXT="lodash code transformation goes here",ERROR_COLOR="#E37171",SUCCESS_COLOR="#A5E371",input=document.createElement("textarea"),info=document.createElement("div"),script=document.createElement("script"),pre=document.querySelector("pre"),initialJSONCode=JSON.parse(pre.innerText||pre.textContent);with(input.setAttribute("type","text"),input.setAttribute("placeholder",PLACEHOLDER_TEXT),info.innerHTML=INFO_TEXT,info.style)position="fixed",top="0",right="0",width="200px",minHeight="70px",padding="2%",background="#D6E38F",opacity="0.8";with(input.style)position="fixed",bottom="0",width="80%",padding="20px",margin="5%",fontSize="15px";script.src=LODASH_SCRIPT_SRC,script.onload=onScriptLoaded,document.head.appendChild(script)}();
   */

  var LODASH_SCRIPT_SRC = '//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.1.0/lodash.min.js';
  var INFO_TEXT = 'Test lodash methods (available in this page as _ global variable) against this data. The global variable json holds the JSON value loaded on this page. Empty the text field to return to the inital JSON value.';
  var PLACEHOLDER_TEXT = 'lodash code transformation goes here';
  var ERROR_COLOR = '#E37171';
  var SUCCESS_COLOR = '#A5E371';

  var input = document.createElement('textarea');
  var info = document.createElement('div');
  var script = document.createElement('script');
  var pre = document.querySelector('pre');
  var initialJSONCode = JSON.parse(pre.innerText || pre.textContent);

  input.setAttribute('type', 'text');
  input.setAttribute('placeholder', PLACEHOLDER_TEXT);
  info.innerHTML = INFO_TEXT;

  with (info.style) {
    position = 'fixed';
    top = '0';
    right = '0';
    width = '200px';
    minHeight = '70px';
    padding = '2%';
    background = '#D6E38F';
    opacity = '0.8';
  }

  with (input.style) {
    position = 'fixed';
    bottom = '0';
    width = '80%';
    padding = '20px';
    margin = '5%';
    fontSize = '15px';
  }

  script.src = LODASH_SCRIPT_SRC;
  script.onload = onScriptLoaded;
  document.head.appendChild(script);

  function onScriptLoaded() {
    window.json = JSON.parse(JSON.stringify(initialJSONCode)); //copy to the window
    display(window.json);
    input.addEventListener('input', onInput);
    document.body.appendChild(input);
    document.body.appendChild(info);
  }

  function onInput(e) {
    if (!e.target.value) {
      display(initialJSONCode);
      setInputState(e.target, 'success');
      return;
    }

    var result = wrap(e.target.value);
    if (result && 'object' === typeof result) {
      setInputState(e.target, 'success');
      display(result);
    } else {
      setInputState(e.target, 'error');
    }
  }

  function display(result) {
    if (pre.innerText) {
      pre.innerText = JSON.stringify(result, null, 2);
    } else {
      pre.textContent = JSON.stringify(result, null, 2);
    }
  }

  function wrap(code) {
    var result = null;
    try {
      result = new Function('return ' + code)();
    } catch (e) {}

    return result;
  }

  function setInputState(input, state) {
    input.style.backgroundColor = state === 'error' ? ERROR_COLOR : SUCCESS_COLOR;
  }
})();