index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/df2957c15c.js" crossorigin="anonymous"></script>
    <title>webSquare</title>
</head>
<body>
    <h1 class="top"><i class="fa-brands fa-square-odnoklassniki"></i>webSquare</h1>
    <div class="square">
        <div class="input">
            <label><i class="fa-brands fa-html5"></i>HTML</label>
            <textarea id="html" onkeyup="run()"> </textarea>

            <label><i class="fa-brands fa-css3-alt"></i>CSS</label>
            <textarea id="css" onkeyup="run()"></textarea>

            <label><i class="fa-brands fa-js"></i>JavaScript</label>
            <textarea id="js" onkeyup="run()"></textarea>
        </div>
        <div class="output">
            <label><i class="fa-solid fa-play"></i>WEB-VIEW</label>
            <iframe id="code-output"></iframe>
        </div>
    </div>

    <script>
        function run(){
            let htmlCode = document.getElementById("html").value;
            let cssCode = document.getElementById("css").value;
            let jsCode = document.getElementById("js").value;
            let output = document.getElementById("code-output");

            output.contentDocument.body.innerHTML = htmlCode + "<style>" + cssCode + "<style>";
            output.contentWindow.eval(jsCode);    
        }
    </script>
</body>
</html>