Skip to content

Instantly share code, notes, and snippets.

@Jaskaranbir

Jaskaranbir/simple_dynamic_web_editor.html

Created May 1, 2016 17:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jaskaranbir/cb17e74962118f7e38ab5eded4deb20e to your computer and use it in GitHub Desktop.
Save Jaskaranbir/cb17e74962118f7e38ab5eded4deb20e to your computer and use it in GitHub Desktop.
Download ZIP
A simple web editor that displays results dynamically as you type
Raw
simple_dynamic_web_editor.html
<html>
<head>
<title>Dynamic Web Editor</title>
</head>
<body>
<style>
body{
margin:0;
}
textarea{
height: 50%;
width: 33.33%;
float:left;
}
iframe{
width:100%;
height: 50%;
}
</style>
<textarea placeholder="HTML" id="h"></textarea>
<textarea placeholder="CSS" id="c"></textarea>
<textarea placeholder="JS" id="j"></textarea>
<iframe id="f"></iframe>
<script>
document.getElementsByTagName('body')[0].addEventListener('keypress',
function(){f.srcdoc = h.value + ' <style> ' + c.value + ' </style> <script>' + j.value + ' <\/script>';}
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment