Auto Updating Code Editor

Auto Updating Code Editor.markdown

Auto Updating Code Editor

May start to lag!!!

A Pen by Patrick Hart on CodePen.

License.

index.html

form(class="codeEditingContainer" id="codeEditingContainer")
	textarea(class="codeEditor" id="codeEditor" placeholder="Type your code here and see it update live over there ––>")
div(class="liveUpdate" id="liveUpdate")

script.js

$(document).ready(function() {
var update = setInterval(updateLive, 1);
//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
	function updateLive() {
		var codeEditor = $("#codeEditor");
		var liveUpdate = $("#liveUpdate");
		var words = codeEditor.val();
//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
		codeEditor.on("keyup", function() {
			liveUpdate.html(words);
		});
	}
//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//\\//
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "nib"

.liveUpdate
	position fixed
	right 0
	top 0
	bottom 0
	height 100vh
	width 50%

.codeEditingContainer
	position fixed
	left 0
	top 0
	bottom 0
	height 100vh
	width 49.5%

.codeEditor
	background #222
	color white
	border none
	resize none // gets rid of resize icon
	height 100%
	width 100%

.codeEditor:focus
	outline none // gets rid of that nasty glow