Merge pull request #1 from maxrugen/conversion-table

Added conversion table for transparency
maxrugen · Nov 22, 2023 · 78d689e · 78d689e
2 parents f75c4d3 + 03900b9
commit 78d689e
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
     <title>Industrial Hours Calculator</title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,6 +14,8 @@ <h2>Industrial Hours Calculator</h2>
         <button onclick="convertTime()">Calculate</button>
         <p id="result"></p>
         <p id="error"></p>
+        <p id="showTableLink" class="showTableLink" onclick="toggleTableVisibility();">Show conversion table</p>
+        <div id="calculationTableContainer"></div>
     </div>
     <script defer src="script.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -26,6 +26,41 @@ function formatToTwoDecimalPlaces(number) {
 function validateInput(hours, minutes) {
     return !isNaN(hours) && !isNaN(minutes) && hours >= 0 && hours <= 23 && minutes >= 0 && minutes <= 59;
 }
+// Function to toggle the visibility of the conversion table
+function toggleTableVisibility() {
+    const tableContainer = document.getElementById("calculationTableContainer");
+    if (tableContainer.style.display === "none" || tableContainer.style.display === "") {
+        tableContainer.style.display = "block";
+    } else {
+        tableContainer.style.display = "none";
+    }
+}
+// Function to generate and display the calculation table
+function generateCalculationTable() {
+    const tableContainer = document.getElementById("calculationTableContainer");
+    const table = document.createElement("table");
+    table.classList.add("conversionTable");
+    // Create header row
+    const headerRow = document.createElement("tr");
+    headerRow.innerHTML = "<th>Minutes</th><th>Industrial Hours</th><th>Minutes</th><th>Industrial Hours</th><th>Minutes</th><th>Industrial Hours</th>";
+    table.appendChild(headerRow);
+    // Populate table with data (30 rows)
+    for (let minute = 0; minute <= 20; minute += 2) {
+        const row = document.createElement("tr");
+        const industrialHours1 = formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute));
+        const industrialHours2 = formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 1));
+        row.innerHTML = `<td>${minute}</td><td>${industrialHours1}</td><td>${minute + 20}</td><td>${industrialHours2}</td><td>${minute + 40}</td><td>${formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 40))}</td>`;
+        table.appendChild(row);
+        // Additional row for odd minutes
+        if (minute < 20) {
+            const oddRow = document.createElement("tr");
+            const oddIndustrialHours = formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 1));
+            oddRow.innerHTML = `<td>${minute + 1}</td><td>${oddIndustrialHours}</td><td>${minute + 21}</td><td>${formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 21))}</td><td>${minute + 41}</td><td>${formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 41))}</td>`;
+            table.appendChild(oddRow);
+        }
+    }
+    tableContainer.appendChild(table);
+}
 // Main conversion function
 function convertTime() {
     const timeInput = readTimeInput();
@@ -59,4 +94,6 @@ document.getElementById("timeInput").addEventListener("keypress", function (even
     if (event.key === "Enter") {
         convertTime();
     }
-});
+});
+// Initial call to generate and display the calculation table
+generateCalculationTable();
diff --git a/style.css b/style.css
@@ -2,16 +2,47 @@
 body {
     font-family: "Lab Grotesque", sans-serif;
     text-align: center;
+    font-size: 14px; /* Adjust the font size as needed */
+}
+/* Add a class for styling the link to show/hide the table */
+.showTableLink {
+    color: #808080; /* Gray color */
+    cursor: pointer;
+    text-decoration: underline;
+    margin-top: 10px; /* Add some space above the link */
 }
 /* CSS for error state */
 .error {
     color: #990000; /* Darker shade of red */
 }
 /* CSS for converter */
 #converter {
-    max-width: 400px;
-    margin: 0 auto;
+    max-width: 500px; /* Increase the max-width as needed */
+    margin: 20px auto 50px;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
+}
+/* CSS for conversion table container */
+#calculationTableContainer {
+    display: none; /* Hidden by default */
+    margin-top: 20px;
+}
+/* CSS for conversion table */
+.conversionTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+}
+.conversionTable th, .conversionTable td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: center;
+}
+.conversionTable th {
+    background-color: #f2f2f2;
+}
+/* Adjust margin-bottom for the last paragraph */
+#converter p:last-child {
+    margin-bottom: 0;
 }