JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<div class="le-header">live editor by emilie <button class="le-click">copy dohtml</button></div>
<div class="le-wrap">
  <div class="le-result">
    <iframe id="le-preview" src="">
      <!DOCTYPE html>
      <html>

        <head>
        </head>

        <body>
        </body>

      </html>
    </iframe>
  </div>
  <div class="le-code">
    <button class="le-tit">HTML</button>
    <div class="le-pannel">
      <textarea id="le-html"><p>Hello World</p></textarea>
    </div>
    <button class="le-tit">CSS</button>
    <div class="le-pannel">
      <textarea id="le-css">p { font-weight: bold; }</textarea>
    </div>
    <button class="le-tit">JavaScript / JQuery</button>
    <div class="le-pannel">
      <textarea id="le-js">console.log("Hello World");</textarea>
    </div>
  </div>
</div>

JavaScript

$(function() {
  function getCode(tObj) {
    var t = $(tObj);
    return t.val();
  }

  function copyTxt(str) {
    var l = str.length;
    var i = $("<input>", {
      type: "text",
      style: "width: 0; height: 0;"
    }).val(str).appendTo("body").focus();
    i.get(0).setSelectionRange(0, l);
    var succeed;
    try {
      succeed = document.execCommand("copy");
    } catch (e) {
      succeed = false;
    }
    i.remove();
    return succeed;
  }

  function updatePreview(t, c) {
    var frame = $(t);
    frame.contents().find("body").html(c);
  }

  function updatePart(t, s, c) {
    var frame = $(t);
    switch (s) {
      case "css":
        frame.contents().find("style").html(c);
        break;
      case "js":
        frame.contents().find("script").html(c);
        break;
      case "html":
        var st = frame.contents().find("style").prop("outerHTML");
        var js = frame.contents().find("script").prop("outerHTML");
        frame.contents().find("body").html("<center>" + st + c + js + "</center>");
        break;
    }
  }

  function getDOHTML(copy) {
    var css = $("<style>").html(getCode("#le-css"));
    var ht = getCode("#le-html");
    var js = $("<script>", {
      type: "text/javascript"
    }).html(getCode("#le-js"));
    if (copy) {
      var ct = "[dohtml]<center>" + css.prop("outerHTML") + ht + js.prop("outerHTML") + "</center>[/dohtml]";
      if (copyTxt(ct)) {
        console.log("Created + Copied DOHTML: " + ct);
      } else {
        console.log("Copy Error", ct);
      }
    }
    updatePreview("#le-preview", "<center>" + css.prop("outerHTML") + ht + js.prop("outerHTML") + "</center>");
  }

  $(".le-click").click(getDOHTML);
  $(".le-tit").click(function(e) {
    var btn = $(this).text().trim().toLowerCase();
    if (btn.indexOf("/") > 0) {
      btn = "js";
    }
    var cnt = $("#le-" + btn).val();
    console.log(btn, cnt);
    updatePart("#le-preview", btn, cnt);
  });
});