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/7a05f378d2.js" crossorigin="anonymous"></script>
    <title>codeEditor</title>
</head>

<body>
    <div class="container">
        <div class="left">
            <label><i class="fa-brands fa-html5"></i>HTML</label>
            <textarea spellcheck="false" id="html-code" onkeyup="run()"></textarea>
            <label><i class="fa-brands fa-css3-alt"></i>CSS</label>
            <textarea spellcheck="false" id="css-code" onkeyup="run()"></textarea>
            <label><i class="fa-brands fa-js"></i>JAVASCRIPT</label>
            <textarea spellcheck="false" id="js-code" onkeyup="run()"></textarea>
        </div>
        <div class="right">
            <label><i class="fa-solid fa-play"></i>OUTPUT</label>
            <iframe id="output"></iframe>
        </div>
    </div>
    <script>
        console.log('jjj');

        function run() {
            let htmlCode = document.getElementById("html-code").value;
            let cssCode = document.getElementById("css-code").value;
            let jsCode = document.getElementById("js-code").value;
            let output = document.getElementById("output");
            output.contentDocument.body.innerHTML = htmlCode + "<style>" + cssCode + "</style>";
            output.contentWindow().eval(jsCode);

        }
    </script>
</body>

</html>