Build Your Own Live Code Editor Using HTML, CSS & JavaScript

We will need three textarea tags which will correspond to the HTML, CSS and JavaScript code. To actually show the compiled code, we will also need an iframe which allows an html document to be inserted into an existing html page. 

HTML

<div class="code-area">
  <textarea id="htmlCode" placeholder="HTML Code" 
            oninput="showPreview()"></textarea>
  <textarea id="cssCode" placeholder="CSS Code" 
            oninput="showPreview()"></textarea>
  <textarea id="jsCode" placeholder="JavaScript Code" 
            oninput="showPreview()"></textarea>				
</div>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
}
.code-area {
  display: flex;
  flex-direction:column;
  width: 50%;
  border-right:1px solid #555;
}
.code-area textarea {
  resize: none;
  outline: none;
  width: 100%;
  height: 33.33%;
  font-size: 18px;
  padding: 10px;
}
.preview-area {
  width: 50%;
}
.preview-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

JS

function showPreview(){
  var htmlCode = document.getElementById("htmlCode").value;
  var cssCode = "";
  var jsCode = ""+document.getElementById("jsCode").value+"";
  var frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(htmlCode+cssCode+jsCode);
  frame.close();
}