Js Playground

by Matheus Stein

HTML

<div class="container">

<p class="title">
JS Playground
</p>

  <div id="editor">

    <span class="link" onClick="run()">Run</span><br>

    <p class="box_title">HTML</p>
    <textarea id="html"></textarea><br>

    <p class="box_title">
      JS
      <select onChange='changeJsPos()'>
        <option id="sel_head">Head</option>
        <option >Body</option>
      </select>
    </p>
    <textarea id="js"></textarea><br>

    <p class="box_title">CSS</p>
    <textarea id="css"></textarea><br>
    
  </div>
  
  <div id="result">
  
    <span class="link" onClick="edit()">Editor</span><br>
    
    <div id="iframe_holder">
      
      <iframe id="iframe_result" src=""></iframe>
      
    </div>
    
  </div>

  <p class="footer">
  By. Matheus Stein
  </p>
  
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700');

body {
    background:#20262e;
    font-family: 'Ubuntu Mono', monospace;
    color:#beccdd;
    font-size:14px;
    margin:0
  }

textarea {
  width:376px;
  min-height:84px;
  border:0;
  background:#494d54;
  resize: none;
  color:#beccdd;
  padding:12px;
  border-radius:4px;
  box-shadow:0 2px 2px 0 rgba(0,0,0,0.2)
}

.link {
  display:inline-block;
  color:#30cbff;
  cursor:pointer;
}

.container {
  width:400px;
  margin-left:calc( 50vw - 230px );
  margin-top:60px;
  background:#292f36;
  padding:30px;
  border-radius:4px;
  box-shadow:0 3px 3px 0px rgba(0,0,0,0.3);
}

.title {
  margin:0 0 16px 0;
  font-weight:bold;
  font-size: 16px;
}

.footer {
  margin:16px 0 0 0;
  font-size:12px;
}

select {
  border:0;
  padding: 4px 8px;
  background: rgba(255,255,255,0.1);
  border-radius:4px;
  transition: all 0.2s;
  font-family: 'Ubuntu Mono', monospace;
  color:#beccdd;
  margin-left:16px;
}

  select:hover {
    background:rgba(255,255,255,0.2)
  }
  
  option {
    background:#292f36;
    padding:4px;
  }
  
  #iframe_holder {
    width:400px;
    height:300px;
    margin-bottom: 12px;
    margin-top:12px;
    background: #494d54;
    box-shadow:0 2px 2px 0 rgba(0,0,0,0.2)
  }
  
  #iframe_result {
    border:0;
    display:inline-block;
    width:100%;
    height:100%;
  }
  
  #result {
    display:none;
  }

JavaScript

var jsPos=0

function run() {
	document.getElementById('editor').style.display="none"
  document.getElementById('result').style.display="block"
  
  
  //This is where the magic happens
  var iframe = document.getElementById('iframe_result');
  iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);

	var html = document.getElementById('html').value;
  var js = document.getElementById('js').value;
  var css = document.getElementById('css').value;

  iframe.document.open();
  
  if (jsPos==0) {
    iframe.document.write('<html><head><script>'+js+decodeURIComponent('%3C%2Fscript%3E')+'<style>'+css+'</style></head><body>'+html+'</body></html>');
  }
  else {
    iframe.document.write('<html><head><style>'+css+'</style></head><body>'+html+' <script>'+js+decodeURIComponent('%3C%2Fscript%3E')+'</body></html>');
  }

  iframe.document.close();
}

function edit() {
	document.getElementById('editor').style.display="block"
  document.getElementById('result').style.display="none"
}

function changeJsPos() {
	if (document.getElementById('sel_head').selected) {
  	jsPos=0
  }
  else {
  	jsPos=1
  }
}