17-11 #1

playground/css.css

@@ -1,14 +1,14 @@
 #content {
   position: absolute;
   width: 100%;
-  height: 94vh;
+  height: 95vh;
   top: 55px;
 }
 #content div {
   float: left;
 }
 #codeContent {
-  height: 100%;
+  height: 95vh;
   width: 50%;
   background-color: #222226;
 }
@@ -47,3 +47,12 @@
   height: 100%;
   width: 50%;
 }
+@media screen and (min-width:0px) and (max-width:1079px) {
+  #codeContent {
+    display: block!important;
+    width: 100%;
+  }
+  iframe {
+    width: 100%!important;
+  }
+}

playground/index.html

@@ -17,14 +17,14 @@
   <div id="content">
     <div id="codeContent">
       <div>
-        <button onclick="showCode('html')">HTML</button>
+        <button onclick="showCode('html')" class="langButton" id="htmlButton">HTML</button>
-        <button onclick="showCode('css')">CSS</button>
+        <button onclick="showCode('css')" class="langButton" id="cssButton">CSS</button>
-        <button onclick="showCode()">JS</button>
+        <button onclick="showCode()" class="langButton" id="jsButton">JS</button>
         <button class="options" id="autoRun" onclick="autoRun()">AUTORUN</button>
         <button onclick="updateCode('run')" class="options">RUN</button>
-        <textarea class="input" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
+        <textarea class="input langInput" id="htmlInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
-        <textarea class="input" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
+        <textarea class="input langInput" id="cssInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
-        <textarea class="input" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
+        <textarea class="input langInput" id="jsInput" onkeyup="updateCode('autoRun')" spellcheck="false"></textarea>
       </div>
     </div>
     <iframe src="" frameborder="0" id="htmlOutput"></iframe>

playground/js.js

@@ -1,4 +1,5 @@
 var d = document.getElementById.bind(document);
+var g = document.querySelector.bind(document);
 var autoRunCheck = localStorage.getItem("autoRun")
 var setCodeHTML = localStorage.getItem("writtenCodeHTML")
 var setCodeCSS = localStorage.getItem("writtenCodeCSS")
@@ -30,16 +31,18 @@ function autoRun() {
 }
 
 function showCode(lang) {
-  d("cssInput").style = "display: none"
+  $(".langButton").css("background-color", "#3b3c45")
-  d("jsInput").style = "display: none"
+  $(".langInput").css("display", "none")
-  d("htmlInput").style = "display: none"
   if (lang == "html") {
+    d("htmlButton").style = "background-color: #27282e;"
     d("htmlInput").style = "display: block"
   }
   else if (lang == "css") {
+    d("cssButton").style = "background-color: #27282e;"
     d("cssInput").style = "display: block"
   }
   else {
+    d("jsButton").style = "background-color: #27282e;"
     d("jsInput").style = "display: block"
   }
 }
@@ -48,15 +51,13 @@ function updateCode(source) {
   var autoRunCheck = localStorage.getItem("autoRun")
   var code = "<style>" + d("cssInput").value + "</style>" + "<script>" + d("jsInput").value + "</script>" + d("htmlInput").value
   if (source == "run" || autoRunCheck == "on") {
+    localStorage.setItem("writtenCodeHTML", d("htmlInput").value)
+    localStorage.setItem("writtenCodeCSS", d("cssInput").value)
+    localStorage.setItem("writtenCodeJS", d("jsInput").value)
     d("htmlOutput").setAttribute('srcdoc', code)
   }
-  localStorage.setItem("writtenCodeHTML", d("htmlInput").value)
-  localStorage.setItem("writtenCodeCSS", d("cssInput").value)
-  localStorage.setItem("writtenCodeJS", d("jsInput").value)
 }
 
 emmet.require('textarea').setup({
-pretty_break: true, // enable formatted line breaks (when inserting
-                // between opening and closing tag)
 use_tab: true       // expand abbreviations by Tab key
 });