Browser Editor

by Kushal Jayswal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <input id="runCode" class="btn btn-primary" type="button" value="Update &amp; Run">
    <div class="row">
        <div id="htmlBox" class="col-md-4 panel panel-default codeBox">
            	<h2>HTML</h2>

            <textarea placeholder="HTML"></textarea>
        </div>
        <div id="cssBox" class="col-md-4 panel panel-default codeBox">
            	<h2>CSS</h2>

            <textarea placeholder="CSS"></textarea>
        </div>
        <div id="jsBox" class="col-md-4 panel panel-default codeBox">
            	<h2>JS</h2>

            <textarea placeholder="JavaScript"></textarea>
        </div>
    </div>
    <div class="row">
        <div id="resultBox" class="col-md-12 panel panel-default no-codeBox">
            	<h2>Output</h2>

            <iframe src="javascript:;"></iframe>
        </div>
    </div>
</div>

CSS

.codeBox, #resultBox {
    height: 100%;
    overflow:auto;
}
.codeBox textarea {
    width: 100%;
    height: 100%;
    min-height: 350px;
}
#resultBox iframe {
    width: 100%;
    min-height: 300px;
}
iframe, textarea {
    border: 0;
}

JavaScript

(function () {
    $(document).ready(function () {

        var output = $("#resultBox iframe").contents().find("body");
        var htmlInput = $("#htmlBox textarea");
        var cssInput = $("#cssBox textarea");
        var jsInput = $("#jsBox textarea");
        var codeInputs = $(".codeBox textarea");
        var runJs = $("#runCode");

        output.css("margin", "2px");
        output.html('<span id="htmlOutput"><pre></pre></span><style id="cssOutput"></style>');


        htmlInput.on('keyup', function () {

            output.find("#htmlOutput").html($(this).val());
        });

        cssInput.on('keyup', function () {
            output.find("#cssOutput").html($(this).val());
        });

        jsInput.on('change', function () {
            output.find("#jsOutput").remove();
            output.append('<script id="jsOutput">' + $(this).val() + '</script>');
        });

        runJs.on('click', function () {
            output.find("#jsOutput").remove();
            output.append('<script id="jsOutput">' + $(this).val() + '</script>');
        });

    });


}(jQuery));