Add files via upload

Raksha25 · Oct 1, 2020 · adb2297 · adb2297
1 parent ba65153
commit adb2297
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -25,7 +25,6 @@
       <div class="toggle-btn active" id="js">JS</div>
       <div class="toggle-btn" id="output">Output</div>
     </div>
-
     <span class="material-icons theme-toggle">
       brightness_4
     </span>

diff --git a/script.js b/script.js
@@ -62,8 +62,22 @@ window.onload = function () {
       $("#outputDiv").toggle();
       $("#output-txt").toggle();
     } else {
-      $("#" + $(this).attr("id") + "TA").toggle();
+      if (window.innerWidth < 500) {
+        document.getElementById("htmlTA").style.display = "none";
+        document.getElementById("cssTA").style.display = "none";
+        document.getElementById("jsTA").style.display = "none";
+        // document.getElementById("outputDiv").style.display = "none";
+
+        document.getElementById("html").classList.remove("active");
+        document.getElementById("css").classList.remove("active");
+        document.getElementById("js").classList.remove("active");
+        document.getElementById($(this).attr("id")).classList.add("active");
+        document.getElementById($(this).attr("id") + "TA").style.display = "block";
+      }
+      else
+        $("#" + $(this).attr("id") + "TA").toggle();
     }
+
   });
 
   $("#runBtn").click(function () {

diff --git a/styles.css b/styles.css
@@ -11,7 +11,6 @@ body {
     width: 100%;
     display: flex;
     flex-direction: row;
-    /* justify-content: center; */
     background-color: #B6EAEE;
     /* background-color:black; */
 }
@@ -26,26 +25,29 @@ body {
 }
 
 #runBtn {
-    /* margin-left: 20%; */
-    /* background-color: #EBF3FF; */
-    border: #EBF3FF 3px solid;
-    margin: 8px auto 8px 400px;
-    color: #227C7B;
-    /* margin: 10px 10px 10px 0px; */
-    background-color: white;
-    border-radius: 15px;
-    /* padding: 50px; */
-    /* margin-left:50px; */
+    border-radius: 7px;
+    padding: 5px 10px;
+    height: fit-content;
+    width: fit-content;
+    margin: auto;
     cursor: pointer;
+    outline: none;
+    border: none;
+    border: white 1px solid;
+    color: #227C7B;
+}
+#runBtn:hover {
+    background: #B6EAEE;
+}
+#runBtn:active {
+    background: #2e3440;
 }
 
 #btnContainer {
     display: flex;
-    width: 100%;
     flex-direction: row;
     background-color: #B6EAEE;
-    justify-content: center;
-    margin-right: 35%;
+    /* justify-content: center; */
     padding: 10px;
 }
 
@@ -54,7 +56,7 @@ body {
     color: #227C7B;
     padding: 5px;
     cursor: pointer;
-
+    font-size: 15px;
 }
 
 .toggle-btn:hover {
@@ -72,7 +74,7 @@ body {
 }
 
 .active {
-    background-color: black;
+    background-color: #2e3440;
 }
 
 #bodyContainer {
@@ -107,9 +109,14 @@ hr {
 }
 
 .theme-toggle {
-    position: absolute;
-    margin: auto;
-    top: 12px;right: 10px;
+    margin: auto 0;
     cursor: pointer;
     margin-right: 15px;
+    color: #2e3440;
+}
+
+@media (max-width: 768px) {
+    #logo {
+        font-size:17px;
+    }
 }