Skip to content

index.md

Latest commit

 

History

History
91 lines (55 loc) · 3.24 KB

index.md

File metadata and controls

91 lines (55 loc) · 3.24 KB
<title> MyCode </title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" type="text/css" href="MyCode/css/style.css">
</head>

<body>
    
    
    <div id="header">
        <div id="logo">
        
            <b>MyCode</b>
            
            <!-- <i><span style="font-size:12px;">Make learning code approachable</span><i> -->
        </div>

        <br>

        <div id="footnote">
            -Make learning code approachable
        </div>


        <div id="buttonContainer">
            
            <div class="toggleButton " id="html">HTML</div> 
            
            <div class="toggleButton" id="css">CSS</div> 
            
            <div class="toggleButton" id="javascript">JavaScript</div> 
            
            <div class="toggleButton " id="output">Output</div> 
        
        </div>
    
    </div>
    <div id="bodyContainer">
    
        <textarea id="htmlPanel" class="panel"><p id="paragraph">Hello World!</p></textarea>
        
        <textarea id="cssPanel" class="panel hidden">p { color: green; }</textarea>
        
        <textarea id="javascriptPanel" class="panel hidden">document.getElementById("paragraph");</textarea>
        
        <iframe id="outputPanel" class="panel"></iframe>
    </div>
</body>
<script type="text/javascript">
        function updateOutput() {
            
            $("iframe").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssPanel").val() + "</style></head><body>" + $("#htmlPanel").val() + "</body></html>");
            
            document.getElementById("outputPanel").contentWindow.eval($("#javascriptPanel").val());
             }
       
        $(".toggleButton").click(function() {
            var panelId = $(this).attr("id") + "Panel";
            
            $("#" + panelId).toggleClass("hidden");
            
            var numberOfActivePanels = 4 - $('.hidden').length;
            
            $(".panel").width(($(window).width() / numberOfActivePanels) - 10);
            
        })
        
        $(".panel").height($(window).height() - $("#header").height() - 15);
        
        $(".panel").width(($(window).width() / 2) - 10);
        
        updateOutput();
        
        $("textarea").on('change keyup paste', function() {

            updateOutput();
        });
    </script>