How to make editor with live changes of HTML, CSS and JS?

Have you heard about Text editor with live changes of HTML , CSS and JAVASCRIPT ?

Get a real-time connection to your output. Make changes to CSS and HTML and JS you'll instantly see those changes on screen.

Number of that kind of editors are available online.

In this article we will see how it works ?

code is given below:

HTML

 
<table>
 <tr>
  <td>
   <pre id="html" class="content" contenteditable>
    
   </pre>
  </td>
  <td rowspan="3" id="Output">
   <iframe id="output"></iframe>
  </td>
 </tr>
 <tr>
  <td>
   <pre id="css" class="content" contenteditable>
   
   </pre>
  </td>
 </tr>
 <tr>
  <td>
   <pre id="js" class="content" contenteditable>

   </pre>
  </td>
 </tr>
</table>
 

CSS

 
pre::before{
 font-size: 16px;
 content: attr(id);
 position: absolute;
 top: 0;
 background-color: #333;
 padding: 10px;
 left: 0;
 right: 0;
 color: #ccc;
 text-transform: uppercase;
 display: block;
 margin: 0 0 15px 0;
 font-weight: bold;
}
html,body,table,iframe{
 border:0;
 height:100%;
 margin:0;
 padding:0;
 width:100%;
}
iframe{
 min-width: 50%;
 position: fixed;
}
td{
 border:2px solid black;
 height:33.33%;
 padding:36px 5px 5px 5px;
 position:relative;
 vertical-align:top;
 width:50%;
 font-family: monospace;
 font-size: 17px;
 max-width: 50%;
}
pre{
 max-height: 100%;
 max-width: 100%;
 overflow: auto;
 margin-top: -0.5px;
 white-space: pre-wrap; 
}
 

JAVASCRIPT

 
window.onload=function(){
 var html=document.getElementById("html"),
  css=document.getElementById("css"),
  js=document.getElementById("js"),
  output=document.getElementById("output"),
  working=false,
  fill=function(){
   if(working){
    return false;
   }
   working=true;
   var document=output.contentDocument,
    style=document.createElement("style"),
    script=document.createElement("script");
   document.body.innerHTML=html.textContent;
   style.innerHTML=css.textContent.replace(/\s/g,"");
   script.innerHTML=js.textContent;
   document.body.appendChild(style);
   document.body.appendChild(script);
   working=false;
  };
 html.onkeyup=fill;
 css.onkeyup=fill;
 js.onkeyup=fill;
}
 

see output of this code: Type some code in HTML CSS and JS box in this output and see live preview.