From 03900b97dc50356eb9362a124d36db58833c4986 Mon Sep 17 00:00:00 2001 From: Max Rugen Date: Wed, 22 Nov 2023 14:56:57 +0100 Subject: [PATCH] Added conversion table for transparency --- index.html | 5 ++++- script.js | 39 ++++++++++++++++++++++++++++++++++++++- style.css | 35 +++++++++++++++++++++++++++++++++-- 3 files changed, 75 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0cb6349..fdffa6d 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ - + + Industrial Hours Calculator @@ -13,6 +14,8 @@

Industrial Hours Calculator

+ +
diff --git a/script.js b/script.js index 3c501c7..d2de8a2 100644 --- 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 = "MinutesIndustrial HoursMinutesIndustrial HoursMinutesIndustrial Hours"; + 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 = `${minute}${industrialHours1}${minute + 20}${industrialHours2}${minute + 40}${formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 40))}`; + 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 = `${minute + 1}${oddIndustrialHours}${minute + 21}${formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 21))}${minute + 41}${formatToTwoDecimalPlaces(calculateIndustrialHours(0, minute + 41))}`; + 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(); } -}); \ No newline at end of file +}); +// Initial call to generate and display the calculation table +generateCalculationTable(); \ No newline at end of file diff --git a/style.css b/style.css index d275765..65fb33b 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,14 @@ 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 { @@ -9,9 +17,32 @@ body { } /* 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; } \ No newline at end of file