ideRealTime.html

<!DOCTYPE html>
<html>
    <head>
        <title>ideRealTime</title>
        <!--FUNCTION HERE-->
        <script>
            
            function refresh (){
                var textContent = document.getElementById('editor-textarea').value;
                document.getElementById('viewer').srcdoc = textContent;

            }
        
        </script>
        <!--BODY, HTML SHOULD GO TO 100% TO ALLOW DIVS TO REACH 100% HEIGHT-->
        <style>
            body, html{height:100%;}
            *{
                padding: 0;
                margin: 0;
            }
            .main{
                background: #ecf0f1;
                width: 100%;
                height: 100%;
                display: inline-flex;
            }
            #editor-textarea{
                width: 100%;
                height: 95%;
                margin: 10px;
                padding: 5px;
            }
            #viewer{
                background: white;
                border: none;
                width: 100%;
                height: 95%;
                margin: 10px;
                border: 1px solid #3498db;
            }
    
    
        </style>
    </head>
    <body>
        <div class="main">
            <textarea id = "editor-textarea"  onkeyup = "refresh()" placeholder = "Code Goes Here..."></textarea>
            <iframe id="viewer"></iframe>
            
        </div>
    </body>

</html>