harunpehlivan
3/14/2018 - 10:57 PM
Code Editor
Code Editor
body {
font: sans-serif;
margin: 0;
padding: 0;
}
#head {
float: left;
background-color: #EEEEEE;
width: 100%;
padding: 5px;
height: 30px;
}
.wrapper {
width: 233px;
margin: 0 auto;
}
button {
font-size: 20px;
border-radius: 1px;
margin: -2px;
}
.toggleButton {
float: left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%;
}
#logo {
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #F5F9FF;
}
.highlightedButton {
background-color: grey;
}
textarea {
width: 50%;
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float: left;
width: 50%;
border-left: none;
}
iframe {
border: none;
}
.hidden {
display: none;
}<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
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').hover(function() {
$(this).addClass('highlightedButton');
}, function() {
$(this).removeClass('highlightedButton');
});
$('.toggleButton').click(function() {
$(this).toggleClass('active');
$(this).removeClass('highlightedButton');
var panelId = $(this).attr('id') + 'Panel';
$('#' + panelId).toggleClass('hidden');
var numberOfActivePanels = 4 - $('.hidden').length;
$('.panel').width(($(window).width() / numberOfActivePanels) - 10);
})
$('.panel').height($(window).height() - $('#head').height() - 15);
$('.panel').width(($(window).width() / 2) - 10);
updateOutput();
$('textarea').on('change keyup paste', function() {
updateOutput();
});
<div id='head'>
<div id='logo'>
Code Editor
</div>
<div class="wrapper">
<div class='toggleButton active' id='html'>HTML</div>
<div class='toggleButton' id='css'>CSS</div>
<div class='toggleButton' id='javascript'>JavaScript</div>
<div class='toggleButton active' id='output'>Output</div>
</div>
</div>
<div id='bodyContainer'>
<textarea id='htmlPanel' class='panel'><p id = 'paragraph'>Heyyyyy</p></textarea>
<textarea id='cssPanel' class='panel hidden'> p { color: green;}</textarea>
<textarea id='javascriptPanel' class='panel hidden'>document.getElementById('paragraph').innerHTML = "sup dude";</textarea>
<iframe id='outputPanel' class='panel'></iframe>
</div>