Responsive-test Editor

In Progress

by Kushal Jayswal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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>
    <div class="row">
        <div class="resultBox view_1170 col-md-12 panel panel-default no-codeBox">
            	<h2>1170 View</h2>

            <iframe src="javascript:;"></iframe>
        </div>
        <div class="resultBox view_992 col-md-12 panel panel-default no-codeBox">
            	<h2>992 View</h2>

            <iframe src="javascript:;"></iframe>
        </div>
        <div class="resultBox view_768 col-md-12 panel panel-default no-codeBox">
            	<h2>768 View</h2>

            <iframe src="javascript:;"></iframe>
        </div>
        <div class="resultBox view_480 col-md-12 panel panel-default no-codeBox">
            	<h2>480 View</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;
}
.view_1170, .view_992, .view_768, .view_480 {
    width: auto;
    background: red;
}
.view_1170 {
    width: 1170px;
}
.view_992 {
    width: 992px;
}
.view_768 {
    width: 768px;
}
.view_480 {
    width: 480px;
}

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));