InstantHTML

In this example below you will see how to do a InstantHTML with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 16omcgra, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 16omcgra ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>InstantHTML</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div id="container">
  <textarea id="src"><h1>Welcome to InstantHTML</h1>
<p>This is a simple way to test
some HTML code without having
to make a new pen.</p>
<h2>Tutorial</h2>
<ol>
  <li>Type code here</li>
  <li>Press Submit</li>
</ol></textarea>
</div>
<div class="btn-group btn-group-justify" id="btns">
  <button class="btn btn-primary" id="btn-submit" type="button">Submit</button>
  <button class="btn btn-default" id="btn-meta" type="button">Add Meta</button>
  <!--button#btn-jquery.btn.btn-default(type="button") Add jQuery-->
  <button class="btn btn-default" id="btn-bstrap" type="button">Add Bootstrap</button>
</div>
<iframe id="out"></iframe>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/16omcgra/instanthtml-oxGOKm */
html {
  overflow: hidden;
}
#container {
  padding: 0;
}
#src {
  background: transparent;
  border: none;
  height: 50vh;
  width: 100%;
  font-family: "courier new", monospace;
  resize: none;
}
#out {
  background: transparent;
  border: none;
  height: 50vh;
  width: 100%;
}
#btns {
  position: absolute;
  bottom: 50vh;
}


/*Downloaded from https://www.codeseek.co/16omcgra/instanthtml-oxGOKm */
(function() {
  $(function() {
    var add, update, urlbstrap, urljquery;
    urljquery = urlbstrap = "<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>\n"; //"<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'.</script>" //<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>"
    update = function() {
      return $("#out").attr("srcdoc", $("#src").val());
    };
    add = function(lnk) {
      return $("#src").val(lnk + "\n" + $("#src").val());
    };
    $("#btn-submit").click(update);
    $("#btn-meta").click(function() {
      return add("<meta charset='utf-8'>\n<meta name='viewport' content='width=device-width, initial-scale=1'>");
    });
    $("#btn-jquery").click(function() {
      return add(urljquery);
    });
    $("#btn-bstrap").click(function() {
      return add(urlbstrap);
    });
    return update();
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsUUFBQSxDQUFBLENBQUE7QUFDQSxRQUFBLEdBQUEsRUFBQSxNQUFBLEVBQUEsU0FBQSxFQUFBO0lBQUEsU0FBQSxHQUNBLFNBQUEsR0FBVSx5R0FEVjtJQUVBLE1BQUEsR0FBTyxRQUFBLENBQUEsQ0FBQTthQUFHLENBQUEsQ0FBRSxNQUFGLENBQVMsQ0FBQyxJQUFWLENBQWUsUUFBZixFQUE0QixDQUFBLENBQUUsTUFBRixDQUFTLENBQUMsR0FBYixDQUFBLENBQXpCO0lBQUg7SUFDUCxHQUFBLEdBQUksUUFBQSxDQUFDLEdBQUQsQ0FBQTthQUFRLENBQUEsQ0FBRSxNQUFGLENBQVMsQ0FBQyxHQUFWLENBQWMsR0FBQSxHQUFJLElBQUosR0FBWSxDQUFBLENBQUUsTUFBRixDQUFTLENBQUMsR0FBYixDQUFBLENBQXZCO0lBQVI7SUFDSixDQUFBLENBQUUsYUFBRixDQUFnQixDQUFDLEtBQWpCLENBQXVCLE1BQXZCO0lBQ0EsQ0FBQSxDQUFFLFdBQUYsQ0FBYyxDQUFDLEtBQWYsQ0FBcUIsUUFBQSxDQUFBLENBQUE7YUFBRyxHQUFBLENBQUksOEZBQUo7SUFBSCxDQUFyQjtJQUNBLENBQUEsQ0FBRSxhQUFGLENBQWdCLENBQUMsS0FBakIsQ0FBdUIsUUFBQSxDQUFBLENBQUE7YUFBRyxHQUFBLENBQUksU0FBSjtJQUFILENBQXZCO0lBQ0EsQ0FBQSxDQUFFLGFBQUYsQ0FBZ0IsQ0FBQyxLQUFqQixDQUF1QixRQUFBLENBQUEsQ0FBQTthQUFHLEdBQUEsQ0FBSSxTQUFKO0lBQUgsQ0FBdkI7V0FFRyxNQUFILENBQUE7RUFWQSxDQUFGO0FBQUEiLCJzb3VyY2VzQ29udGVudCI6WyIkIC0+XG4gIHVybGpxdWVyeT0jXCI8c2NyaXB0IHNyYz0nLy9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvanF1ZXJ5LzIuMi4yL2pxdWVyeS5taW4uanMnLjwvc2NyaXB0PlwiXG4gIHVybGJzdHJhcD1cIjxsaW5rIHJlbD0nc3R5bGVzaGVldCcgaHJlZj0naHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjYvY3NzL2Jvb3RzdHJhcC5taW4uY3NzJz5cXG5cIiM8c2NyaXB0IHNyYz0naHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjYvanMvYm9vdHN0cmFwLm1pbi5qcyc+PC9zY3JpcHQ+XCJcbiAgdXBkYXRlPS0+ICQoXCIjb3V0XCIpLmF0dHIgXCJzcmNkb2NcIiwgZG8gJChcIiNzcmNcIikudmFsXG4gIGFkZD0obG5rKS0+ICQoXCIjc3JjXCIpLnZhbCBsbmsrXCJcXG5cIitkbyAkKFwiI3NyY1wiKS52YWxcbiAgJChcIiNidG4tc3VibWl0XCIpLmNsaWNrIHVwZGF0ZVxuICAkKFwiI2J0bi1tZXRhXCIpLmNsaWNrIC0+IGFkZCBcIjxtZXRhIGNoYXJzZXQ9J3V0Zi04Jz5cXG48bWV0YSBuYW1lPSd2aWV3cG9ydCcgY29udGVudD0nd2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEnPlwiXG4gICQoXCIjYnRuLWpxdWVyeVwiKS5jbGljayAtPiBhZGQgdXJsanF1ZXJ5XG4gICQoXCIjYnRuLWJzdHJhcFwiKS5jbGljayAtPiBhZGQgdXJsYnN0cmFwXG4gIFxuICBkbyB1cGRhdGVcbiJdfQ==
//# sourceURL=coffeescript

Comments