Code Editor

code-editor.markdown

Code Editor

A Pen by Terron Johnson on CodePen.

License.

index.html

<div class="wrapper navbar">
  
  <div id="menu">
     
    <div class="container text-center">
     
 <div id="drop"  aria-label="Basic example">
  <button type="button" class="btn btn-primary  active sel ">HTML</button>
  <button type="button" class="btn btn-primary too sel">CSS</button>
  <button type="button" class="btn btn-primary too sel">Javascript</button>
     <button type="button" class="btn btn-primary  sel active">Result</button>
   <button id="run" type="button" class="btn btn-default ">Run</button>
   
   <div id="logo">
     <h4>CodeMachine</h4>
   </div>
   
</div>
    
  </div>  
</div>
  
  
  
  <div class="clear"></div>


<div class="codeblock" id="HTML">
 
  <div class="btn btn-default label">HTML</div>
  
  <textarea id="change"  >&#13;&#10;&#13;&#10;&nbsp; &nbsp;<div id="chill"></div></textarea>
 
  </div>
 
  
  <div class="codeblock" id="CSS">
 
  <div class="btn btn-default label">CSS</div>
  
  <textarea id="changeCss">&#13;&#10;&#13;&#10;&nbsp; &nbsp; </textarea>
  </div>

  
  
  <div class="codeblock" id="Javascript">
 
  <div class="btn btn-default label">Javascript</div>
  
  <textarea id="changeJs">&#13;&#10;&#13;&#10;&nbsp; &nbsp;document.getElementById("chill").innerHTML="hot"</textarea>
  </div>
  
  
  
  <div class="codeblock" id="Result">
 
  <div class="btn btn-default label">Result</div>
  
    <iframe id="frame"></iframe>
  </div>
  
  

</div>

script.js

var windowHeight = $(window).height();
var menu = $("#menu").height();
var code= windowHeight - menu;
$("#htmlcode").height(code + "px");


$(".sel").click(function() {
$(this).toggleClass("active");
$(this).toggleClass("too");
 var activeDiv = $(this).html();
 
  $("#" +activeDiv).toggle()
  
  var appear = $(".codeblock").filter(function() {
    return ($(this).css("display") !=  "none");
     
  
  }).length;
  
  
  var divWidth = 100/appear;
  $(".codeblock").width(divWidth+"%");

  
  
});

$("#run").click(function() {
  var x = $("#change").val();
  var c = $("#changeCss").val();
  //$("iframe").contents().find("html").html(x);
  
  $("iframe").contents().find("html").html('<style>' + $("#changeCss").val() + '</style>' + $("#change").val());
  
  document.getElementById("frame").contentWindow.eval($('#changeJs').val());
  
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

style.css

body {
  margin: 0;
  padding: 0;
  
}

#menu {
  width 100%;
  background-color: #e0e0e0;
  height: 50px;
  border-bottom: solid 1px darkgray;
}

#run {
  float: right;
 border-radius: 30px;
  width: 10%;
}

#logo {
  float: left;
 font-weight: bold;
}

#drop {
  margin-top: 5px;
}

.too {
  background-color: gray;
}

.active {
  background-color: gray;
}

button: focus {
  outline: solid 2px !important;
}

.clear {
  clear: both;
}

.codeblock  {
  width: 50%;
    height: 100%;
  float: left;
height: 90vw;
 position: relative;
 border-right: ;  
}
.codeblock textarea {
  
  width: 100%;
  height: 100%;
 border-right: solid 1px;
  font-family: monotype;
  font-size: 100%;
  padding: 0;
  box-sizing: border-box;
  border-bottom: none;
  border-top: none;
  border-left: none;
  box-sizing: border-box;
}

textarea:focus {
    outline: none !important;
    border:3px solid green;
    box-shadow: 0 0 10px #719ECE;
}




#change {
  margin-top: 0px;
}

#changeCss {
  margin-top: 0px;
}

.label {
  position: absolute;
  right: 10px;
  top: 5px;
  color: black;
  font-family: times;
  font-weight: bold;
  font-size: 20px;
  padding: 5px;
}


#CSS, #Javascript {
  display: none;
}



iframe {
  height: 100%;
    width: 100%;
  border: none;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />