In this video, we will create a Codepen like Live Code Editor for HTML, CSS and JavaScript with Live Realtime Preview.
Source Code :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Live Code Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<textarea id="html" placeholder="HTML"></textarea>
<textarea id="css" placeholder="CSS"></textarea>
<textarea id="js" placeholder="JavaScript"></textarea>
<iframe id="code"></iframe>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
style.css
body{
text-align: center;
}
textarea{
width: 32%;
float: top;
min-height: 250px;
overflow: scroll;
margin: auto;
display: inline-block;
background: #f4f4f9;
outline: none;
font-family: Courier,sans-serif;
font-size: 14px;
}
iframe{
bottom: 0;
position: relative;
width: 100%;
height: 35em;
}
app.js
function compile(){
var html = document.getElementById('html');
var css = document.getElementById('css');
var js = document.getElementById('js');
var code = document.getElementById('code').contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(
html.value +
"<style>" +
css.value +
"</style>" +
"<script>" +
js.value +
"</script>"
);
code.close();
};
}
compile();
