Real-Time HTML/CSS Editor

index.html

<header>
   <h1>Real-Time HTML/CSS Editor</h1>
   <h2>Put something between the tags or replace them altogether...</h2>
</header>
<div class="container grid">
   <form>
      <h3>HTML</h3>
      <textarea id="html" class="edit"><h1></h1></textarea>

      <h3>CSS</h3>
      <textarea id="css" class="edit">h1 {

}</textarea>
   </form>
</div>

<div class="output grid">
   <iframe></iframe>
</div>

real-time-html-css-editor.markdown

Real-Time HTML/CSS Editor

Something I made a LONG time ago and thought was worth putting here.

A Pen by Tim Samoff on CodePen.

License.

script.js

(function() {
   $(".grid").height($(window).height());

   var contents = $("iframe").contents(),
       body = contents.find("body"),
       styleTag = $("<style></style>").appendTo(contents.find("head"));

   $("textarea.edit").keyup(function() {
      var $this = $(this);
      if ($this.attr("id") === "html") {
         body.html($this.val());
      } else {
         // it had to be css
         styleTag.text($this.val());
      }
   });
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

body {
   background: none !important;
   height: 100%;
   margin: 20px;
   padding: 0;
   font-family: Arial;
   font-weight: bold;
}
h1,
h2 {
   text-align: center;
}
h1 {
   font-size: 2em;
}
h3 {
   margin-top: 20px;
}
textarea {
   background: #fff !important;
   width: 100%;
   margin: 0 20px 0 0;
   height: 200px;
   border-radius: 5px;
   border-color: #555;
   font-family: "Source Code Pro", monospace;
   font-size: 1em;
   resize: none;
}
textarea:hover {
   background: #fff !important;
}
textarea:focus {
   outline: none;
   background: #fff !important;
}
.grid {
   width: 50%;
   float: left;
   overflow: hidden;
   box-sizing: border-box;
   padding: 0 30px 0 0;
}
.edit {
   background: #fff !important;
   padding: 5px;
}
.output {
   background: #fff;
   border-left: 1px solid #f3f3f3;
   overflow: hidden;
   padding: 0 20px;
   margin: 20px 0;
}
.output iframe {
   border: none;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.output iframe::-webkit-scrollbar {
   display: none;
}