Developers' Forum

<div id="editors">
    <div class="column">
        <h3>HTML</h3>

        <textarea id="html_area" name="crui_html" class="coderunner-ui-element" style="width:100%;"></textarea>
        <div id="ace_editor1" class="html_question">

            <script>
                var html_area = $('textarea[name="crui_html"]').hide();
                var editor1 = ace.edit("ace_editor1");
                editor1.setTheme("ace/theme/github");
                editor1.getSession().setMode("ace/mode/html");
                editor1.getSession().setValue(html_area.val());
                editor1.getSession().on('change', function() {
                    html_area.val(editor1.getSession().getValue());
                    html_area.change();
                });
            </script>
        </div>
    </div>
    <div class="column">
        <h3>CSS</h3>

        <textarea id="css_area" name="crui_css" class="coderunner-ui-element" style="width:100%;"></textarea>
        <div id="ace_editor2" class="css_question">

            <script>
                var css_area = $('textarea[name="crui_css"]').hide();
                var editor2 = ace.edit("ace_editor2");
                editor2.setTheme("ace/theme/github");
                editor2.getSession().setMode("ace/mode/css");
                editor2.getSession().setValue(css_area.val());
                editor2.getSession().on('change', function() {
                    css_area.val(editor2.getSession().getValue());
                    css_area.change();
                });
            </script>
        </div>
    </div>
</div>
<iframe id="rendered_html" style="width: 100%; min-height: 400px; border: 1px solid black;"></iframe>


<script>
    function render() {
        var html_area = new DOMParser().parseFromString($("#html_area").val(), "text/html");;
        var style_tag = document.createElement("style");
        style_tag.textContent = $("#css_area").val();

        $(html_area).find("html").find("head").append(style_tag);
        console.info($(html_area).find("html").html());
        document.getElementById("rendered_html").srcdoc = $(html_area).find("html").clone().html();
    }

    function check() {
        $(".coderunnerexamples thead tr>:first-child").hide();
        $(".coderunnerexamples tbody tr").each(function() {
            var testresult;
            $(this).find(">:first-child").each(function() {
                testresult = new Function("html_area", "rendered_html", $(this).text())($("#html_area").val(), $("#rendered_html").contents().find("html"));
                // First to arguments are the variable-names, then in second bracket the variable values
                // third parameter is the function body

                $(this).hide();
                if (testresult == true) {
                    $(this).parent().children().each(function() {
                        $(this).css("background-color", "#4c4");
                    });
                } else {
                    $(this).parent().children().each(function() {
                        $(this).css("background", "#c44");
                    });
                }
            });

        });
    }
    $(document).ready(function() {
        render();
        check();
    });
    $("#html_area").on('change keyup paste input', function() {
        console.info("change", $(this).val())
        render();
        check();
    });
    $("#css_area").on('change keyup paste input', function() {
        console.info("change", $(this).val())
        render();
        check();
    });
</script>
</div>

<style>
    .que.coderunner .ace_editor.html_question {
        height: 400px;
    }

    .que.coderunner .ace_editor.css_question {
        height: 400px;
    }

    #editors {
        display: flex
    }

    .column {
        flex: 50%;
    }
</style>