Merge pull request #14 from Jagpreet153/main

feat: styled navbar and made responsive added current tab feature
OPCODE-Open-Spring-Fest · Mar 25, 2024 · 9eafadb · 9eafadb
2 parents 658858f + 855b8f8
commit 9eafadb
Show file tree

Hide file tree

Showing 13 changed files with 232 additions and 48 deletions.
diff --git a/Unit Converter/CSS/Currency.css b/Unit Converter/CSS/Currency.css
@@ -0,0 +1,3 @@
+.cur{
+    background-color: grey;
+}
diff --git a/Unit Converter/CSS/length.css b/Unit Converter/CSS/length.css
@@ -1,5 +1,4 @@
-body {
-    margin: 0;
+body{
     font-family: Arial, sans-serif;
     background-color: #f5f5f5;
 }
@@ -14,7 +13,9 @@ body {
     background-size: cover;
     background-position: center; 
 }
-
+.len{
+    background-color: grey;
+}
 .containment {
     display: flex;
     flex-direction: column;

diff --git a/Unit Converter/CSS/temperature.css b/Unit Converter/CSS/temperature.css
@@ -0,0 +1,3 @@
+.temp{
+    background-color: grey;
+}
diff --git a/Unit Converter/CSS/volume.css b/Unit Converter/CSS/volume.css
@@ -0,0 +1,3 @@
+.vol{
+    background-color: grey;
+}
diff --git a/Unit Converter/CSS/weight.css b/Unit Converter/CSS/weight.css
@@ -0,0 +1,3 @@
+.wei{
+    background-color: grey;
+}
diff --git a/Unit Converter/HTML/currency.html b/Unit Converter/HTML/currency.html
@@ -4,9 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Currency</title>
+  <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="../CSS/Currency.css">
 </head>
 <body>
-
+
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/currency.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a class="cur" href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile cur"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
 
     <p id="desc">This is a simple unit converter.</p>
 
@@ -42,6 +63,6 @@
 </div>
 
 </form>
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/length.html b/Unit Converter/HTML/length.html
@@ -5,8 +5,30 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Length</title>
   <link rel="stylesheet" href="../CSS/length.css">
+  <link rel="stylesheet" href="../styles.css">
 </head>
 <body>
+
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/length.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a class="len" href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile len"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile "><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
   <div class="bg">
     <div class="containment">
       <p id="desc">This is a simple unit converter.</p>
@@ -41,6 +63,7 @@
         </form>
       </div>
     </div>
-  </div>
+</div>
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/temperature.html b/Unit Converter/HTML/temperature.html
@@ -4,11 +4,31 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Temperature</title>
+  <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="../CSS/temperature.css">
 </head>
 <body>
-
 
-
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/temperature.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a class="temp" href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile temp"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
     <p id="desc">This is a simple unit converter.</p>
 
         <p>You can also convert from one unit to another unit.</p>
@@ -42,6 +62,6 @@
 
 
 </form>
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/volume.html b/Unit Converter/HTML/volume.html
@@ -4,9 +4,30 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Volume</title>
+  <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="../CSS/volume.css">
 </head>
 <body>
-
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/volume.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a href="./weight.html">Weight</a></li>
+      <li><a class="vol" href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile vol"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
 
     <p id="desc">This is a simple unit converter.</p>
 
@@ -45,7 +66,6 @@
 
 </form>
 
-
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/HTML/weight.html b/Unit Converter/HTML/weight.html
@@ -4,10 +4,32 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Weight</title>
+  <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="../CSS/weight.css">
 </head>
 <body>
 
-
+
+  <nav>
+    <ul class="sidebar">
+      <li onclick=hideSidebar()><a href="../HTML/weight.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+      <li><a href="./length.html">Length</a></li>
+      <li><a class="wei" href="./weight.html">Weight</a></li>
+      <li><a href="./volume.html">Volume</a></li>
+      <li><a href="./currency.html">Currency</a></li>
+      <li><a href="./temperature.html">Temperature</a></li>
+    </ul>
+    <ul>
+      <li><a href="../index.html">Unit Convertor</a></li>
+      <li class="hideOnMobile"><a href="./length.html">Length</a></li>
+      <li class="hideOnMobile wei"><a href="./weight.html">Weight</a></li>
+      <li class="hideOnMobile"><a href="./volume.html">Volume</a></li>
+      <li class="hideOnMobile"><a href="./currency.html">Currency</a></li>
+      <li class="hideOnMobile"><a href="./temperature.html">Temperature</a></li>
+      <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+    </ul>
+  </nav>
+
     <p id="desc">This is a simple unit converter.</p>
 
         <p>You can also convert from one unit to another unit.</p>
@@ -43,6 +65,6 @@
 
 
 </form>
-
+<script src="../script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/index.html b/Unit Converter/index.html
@@ -8,20 +8,30 @@
 
 </head>
 <body>
-
-<div class="navbar">
-    <span class="unit">Unit Convertor</span>
-    <div>
-        <a href="">Length</a>
-        <a href="">Weight</a>
-        <a href="">Volume</a>
-        <a href="">Currency</a>
-        <a href="">Temperature</a>
-    </div>
-
-  </div>
+    <nav>
+      <ul class="sidebar">
+        <li onclick=hideSidebar()><a href="index.html"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
+        <li><a href="./HTML/length.html">Length</a></li>
+        <li><a href="./HTML/weight.html">Weight</a></li>
+        <li><a href="./HTML/volume.html">Volume</a></li>
+        <li><a href="./HTML/currency.html">Currency</a></li>
+        <li><a href="./HTML/temperature.html">Temperature</a></li>
+      </ul>
+      <ul>
+        <li><a href="index.html">Unit Convertor</a></li>
+        <li class="hideOnMobile"><a href="./HTML/length.html">Length</a></li>
+        <li class="hideOnMobile"><a href="./HTML/weight.html">Weight</a></li>
+        <li class="hideOnMobile"><a href="./HTML/volume.html">Volume</a></li>
+        <li class="hideOnMobile"><a href="./HTML/currency.html">Currency</a></li>
+        <li class="hideOnMobile"><a href="./HTML/temperature.html">Temperature</a></li>
+        <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
+      </ul>
+    </nav>
   <h2>
-    This is the Home Page
+   This is home page 
   </h2>
+
+
+<script src="script.js"></script>
 </body>
 </html>
diff --git a/Unit Converter/script.js b/Unit Converter/script.js
@@ -1 +1,10 @@
-//Javascript for index.html will be written here
+//Javascript for index.html will be written here
+
+function showSidebar(){
+  const sidebar = document.querySelector('.sidebar')
+  sidebar.style.display = 'flex'
+}
+function hideSidebar(){
+  const sidebar = document.querySelector('.sidebar')
+  sidebar.style.display = 'none'
+}