CSS
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
}
.code-area {
display: flex;
flex-direction:column;
width: 50%;
border-right:1px solid #555;
}
.code-area textarea {
resize: none;
outline: none;
width: 100%;
height: 33.33%;
font-size: 18px;
padding: 10px;
}
.preview-area {
width: 50%;
}
.preview-area iframe {
width: 100%;
height: 100%;
border: none;
}
JavaScript
function showPreview(){
var htmlCode = document.getElementById("htmlCode").value;
var cssCode = "";
var jsCode = "
"+document.getElementById("jsCode").value+"";
var frame = document.getElementById("preview-window").contentWindow.document;
frame.open();
frame.write(htmlCode+cssCode+jsCode);
frame.close();
}
Post a Comment