Live HTML CSS Editor Basic

on

This is a cool live HTML/CSS Editor in which we are going to use very basic JavaScript.

This tutorial is made for beginners, intermediate or advanced programmers.


Source code

Index.html

<!DOCTYPE html>
<html>
<head>
<title> Editor </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body onkeyup="run();">
<div class="editor" id="editor">
HTML <textarea id="htmltext"></textarea>
CSS <textarea id="csstext"></textarea>
</div>
<div class="browser" id="browserdiv">
Preview
<iframe class="browserframe" id="browserframe"></iframe>
</div>
</body>
</html>

Style.css

 iframe{
width:100%;
height:100%;
}
textarea{
width: 100%;
height: 300px;
}
.editor{
width: 40%;
height: 100%;
float: left;
}
.browser{
width: 59%;
height: 630px;
float: right;
}

Script.js

 function run(){
var htmltext = document.getElementById("htmltext");
var csstext = document.getElementById('csstext');
var browserframe = document.getElementById('browserframe');
var doc = browserframe.contentWindow.document;
doc.head.innerHTML = '<style type="text/css">' + csstext.value + '</style>';
doc.body.innerHTML = htmltext.value;
}