Made Download Time Calculator responsive (#1553)

Rakesh9100 · Jul 6, 2024 · 314f119 · 314f119
1 parent 763c29f
commit 314f119
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 56 deletions.
diff --git a/Calculators/Download-Time-Calculator/index.html b/Calculators/Download-Time-Calculator/index.html
@@ -1,4 +1,4 @@
-<html>
+<!DOCTYPE html>
 
 <head>
     <meta charset="UTF-8">
@@ -9,106 +9,66 @@
 </head>
 
 <body>
-
     <form>
-
-        <table border="4">
-
+        <table border="4" class="styled-table">
             <tr class="filesizetr">
-
-                <td style="display: flex;
-    align-items: center;
-    gap: 1rem;">File Size?
-
+                <td class="filesize">File Size?
                     <input name="size" class="selectbar" size="10" type="TEXT" />
                     <input onclick="compute(this.form, 1)" type="BUTTON" value="KB" />
                     <input onclick="compute(this.form, 1024)" type="BUTTON" value="MB" />
-
                 </td>
-
                 <td colspan="3">
                     <center><b>It will take you ....</b></center>
-
                 </td>
-
             </tr>
-
-            <tr>
-
+            <tr class="heading">
                 <th>If your modem is a ....</th>
-
                 <th>Hours </th>
-
                 <th>Minutes </th>
-
                 <th>Seconds</th>
-
             </tr>
-
             <tr>
-
                 <td>9.6 Kb</td>
                 <td class="m-td"><input name="1hour" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="1minute" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="1second" size="6" type="TEXT" /></td>
-
             </tr>
-
             <tr>
-
                 <td>14.4 Kb</td>
                 <td class="m-td"><input name="2hour" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="2minute" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="2second" size="6" type="TEXT" /></td>
-
             </tr>
-
             <tr>
-
                 <td>28.8 Kb</td>
                 <td class="m-td"><input name="3hour" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="3minute" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="3second" size="6" type="TEXT" /></td>
-
             </tr>
-
             <tr>
-
                 <td>56 Kb</td>
                 <td class="m-td"><input name="4hour" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="4minute" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="4second" size="6" type="TEXT" /></td>
-
             </tr>
-
             <tr>
-
                 <td>ISDN (64 Kb)</td>
                 <td class="m-td"><input name="5hour" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="5minute" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="5second" size="6" type="TEXT" /></td>
-
             </tr>
-
             <tr>
-
                 <td>ISDN (128 Kb)</td>
                 <td class="m-td"><input name="6hour" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="6minute" size="6" type="TEXT" /> </td>
                 <td class="m-td"><input name="6second" size="6" type="TEXT" /></td>
-
             </tr>
-
             <tr>
-
                 <td></td>
-
                 <td><input name="7hour" size="6" type="HIDDEN" /> </td>
                 <td><input name="7minute" size="6" type="HIDDEN" /> </td>
                 <td><input name="7second" size="6" type="HIDDEN" /></td>
-
             </tr>
-
             <input name="8hour" size="6" type="HIDDEN" />
             <input name="8minute" size="6" type="HIDDEN" />
             <input name="8second" size="6" type="HIDDEN" />
@@ -121,13 +81,10 @@
             <input name="11hour" size="6" type="HIDDEN" />
             <input name="11minute" size="6" type="HIDDEN" />
             <input name="11second" size="6" type="HIDDEN" />
-
         </table>
-
     </form>
 
     <script src="script.js"></script>
-
 </body>
 
-</html>
+</html>
diff --git a/Calculators/Download-Time-Calculator/style.css b/Calculators/Download-Time-Calculator/style.css
@@ -4,16 +4,27 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: url("https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg") no-repeat;
+    background: url("https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg") no-repeat center center fixed;
     background-size: cover;
     color: white;
+    height: fit-content;
+    margin-top: 15vh;
+    padding: 1rem; /* Added padding to avoid content touching the edges */
 }
 
-table {
-    width: 60vw;
+.styled-table {
+    max-width: 60vw;
+    width: 100%; /* Ensures the table takes full width within the container */
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
     border: 5px solid white;
+    border-collapse: collapse;
+}
+
+.styled-table th,
+.styled-table td {
+    border: 2px solid white; /* Adjust as necessary */
+    padding: 0.5rem;
 }
 
 .selectbar {
@@ -31,10 +42,6 @@ table {
     text-align: center;
 }
 
-td {
-    padding: 0.5rem;
-}
-
 input[type=BUTTON] {
     width: 15%;
     background-color: #4CAF50;
@@ -59,4 +66,66 @@ div {
 input[type="text" i] {
     font-weight: 700;
     text-align: center;
-}
+}
+
+/* Media Queries */
+@media (max-width:1082px) {
+    .styled-table {
+        max-width: 90vw;
+    }
+}
+
+@media (max-width: 768px) {
+    .styled-table {
+        max-width: 90vw;
+        font-size: 16px;
+    }
+
+    .selectbar {
+        width: 70%;
+    }
+
+    input[type=BUTTON] {
+        width: 40px;
+        padding: 0.4rem;
+    }
+
+    input[type="text" i] {
+        width: 50px;
+        padding: 0.4rem 0;
+    }
+
+    .styled-table td {
+        margin: 2px;
+    }
+}
+
+/* For small phones */
+@media (max-width: 480px) {
+    .styled-table {
+        width: 90vw;
+        font-size: 12px;
+    }
+
+    .selectbar {
+        width: 80%;
+    }
+
+    input[type=BUTTON] {
+        width: 30px;
+        padding: 0.3rem;
+    }
+
+    .styled-table td {
+        padding: 0.3rem;
+    }
+
+    .styled-table .m-td {
+        padding: 0.2rem;
+    }
+
+    input[type="text" i] {
+        width: 50px;
+        padding: 0.3rem 0;
+    }
+}