<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text editor</title>
<style>
*{
margin: 0;
padding: 0%;
box-sizing: border-box;
}
body{
background-color: black;
max-height: 100vh;
}
.editor-container{
display: flex;
}
.editor-container .wrap{
flex-basis: 40%;
background-color: rgb(0, 0, 0);
height: 300px;
padding: 10px;
}
textarea{
width: 100%;
height: 100%;
resize: none;
color: gray;
border-radius: 7px;
outline: none;
border: none;
padding: 7px;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 2.3px;
}
::placeholder{
color: gray;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
iframe{
width: 100%;
background-color: white;
height: 500px;
padding: 10px;
}
.open-new-browser {
position: absolute;
top: 2px;
right: 2px;
}
.open-new-browser span{
width: 50px;
height: 50px;
background-color: black;
z-index: 1;
display: block;
border-radius: 50%;
color: white;
font-weight: bold;
cursor: pointer;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="body-wrapper">
<div class="editor-container">
<div class="html-col wrap">
<textarea name="" id="html" placeholder="Html"></textarea>
</div>
<div class="css-col wrap">
<textarea name="" id="css" placeholder="Css"></textarea>
</div>
<div class="js-col wrap">
<textarea name="" id="js" placeholder="Javascript"></textarea>
</div>
</div>
<div class="browser">
<iframe id="code"></iframe>
</div>
<div class="open-new-browser">
<span id="viewBrowser">View</span>
</div>
</div>
</body>
<script>
let html = document.getElementById('html');
let css = document.getElementById('css');
let js = document.getElementById('js');
let code = document.getElementById('code').contentWindow.document;
setInterval(()=> {
code.open();
code.writeln( html.value + '<style>' + css.value + '</styles>' + '<script>' + js.value + '</script>');
code.close()
},1000)
let view = document.getElementById('viewBrowser');
view.addEventListener('click', ()=> {
let frame = document.getElementById('code').contentWindow.document
frame = window.open();
frame.document.writeln(html.value + '<style>' + css.value + '</styles>' + '<script>' + js.value + '</script>')
})</script>
</html>