Merge pull request #387 from aweSAM-XS/time-remaining

Time remaining
0xvashishth · Oct 19, 2023 · 3888773 · 3888773
2 parents e9ca75f + 2c98a50
commit 3888773
Show file tree

Hide file tree

Showing 8 changed files with 301 additions and 0 deletions.
diff --git a/Calculators/Time Remaining/README.md b/Calculators/Time Remaining/README.md
@@ -0,0 +1,44 @@
+# Time Remaining Calculator
+
+![Calculator Screenshot - Dark mode](./images/dark-mode.PNG)
+![Calculator Screenshot - Light mode](./images/light-mode.PNG)
+
+A simple "Time Remaining" calculator with options to calculate the time remaining from the current time to a future time, with units in hours, days, or years. The calculator provides a user-friendly interface with support for light and dark modes.
+
+## Features
+
+- **Unit Selection:** Choose the time unit you want to calculate the remaining time in: "Hours," "Days," or "Years."
+
+- **Date and Time Input:** When selecting "Hours," you can input both the date and time (defaulting to the current date and time).
+
+- **Light and Dark Mode:** The calculator offers a visually appealing interface with options for both light and dark modes.
+
+## Usage
+
+1. Select the time unit you want to use (Hours, Days, or Years) from the dropdown.
+
+2. If you choose "Hours," enter the future date and time for which you want to calculate the remaining time. By default, it uses the current date and time.
+
+3. Click the "Calculate" button to see the remaining time based on your selection.
+
+## How to Run
+
+- Simply open the `index.html` file in a web browser to run the calculator.
+
+## Acknowledgments
+
+- The calculator design is inspired by the chat interface, making it easy to use and visually appealing.
+
+## Authors
+
+- [aweSAM](https://github.com/awesam-XS)
+
+## Contact
+
+If you have any questions or suggestions, please feel free to reach out to [[email protected]](mailto:[email protected]).
+
+## Disclaimer
+
+This calculator is provided for educational and informational purposes only. It should not be used for critical or time-sensitive applications. The accuracy of the calculations may vary depending on your system's time settings.
+
+Enjoy calculating time with the Time Remaining Calculator!
diff --git a/Calculators/Time Remaining/images/dark-mode.PNG b/Calculators/Time Remaining/images/dark-mode.PNG
diff --git a/Calculators/Time Remaining/images/favicon.png b/Calculators/Time Remaining/images/favicon.png
diff --git a/Calculators/Time Remaining/images/light-mode.PNG b/Calculators/Time Remaining/images/light-mode.PNG
diff --git a/Calculators/Time Remaining/images/mobile.png b/Calculators/Time Remaining/images/mobile.png
diff --git a/Calculators/Time Remaining/index.html b/Calculators/Time Remaining/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="style.css" />
+		<link rel="shortcut icon" href="./images/favicon.png" type="image/x-icon">
+        <title>Time Remaining Calculator</title>
+    </head>
+    <body>
+        <div id="calculator" class="calculator">
+            <header class="header">
+                <div class="mode-switch">
+                    <label for="mode-toggle">
+                        <span id="mode">Light</span> Mode</label
+                    >
+                    <input type="checkbox" id="mode-toggle" />
+                </div>
+                <h1>Time Remaining Calculator</h1>
+            </header>
+            <main>
+				<div id="current-time">
+					<h2>Today</h2>
+					<p>Current Date: <span id="current-date-display"></span></p>
+					<p>Current Time: <span id="current-time-display"></span></p>
+				</div>
+                <div class="options">
+                    <label for="unit">Select unit:</label>
+                    <select id="unit">
+                        <option value="hours" selected>Hours</option>
+                        <option value="days">Days</option>
+                        <option value="years">Years</option>
+                    </select>
+                </div>
+                <div class="input-section">
+                    <div id="timeInput">
+                        <label for="time">Select time:</label>
+                        <input type="time" id="time" />
+                    </div>
+                    <div id="dateInput">
+                        <label for="date">Select date:</label>
+                        <input type="date" id="date" />
+                    </div>
+                </div>
+                <div class="calculate-button">
+                    <button id="calculate">Calculate</button>
+                </div>
+                <div class="result">
+                    <p>Time <span id="direction"></span>: <span id="time-remaining"></span></p>
+                </div>
+            </main>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/Calculators/Time Remaining/script.js b/Calculators/Time Remaining/script.js
@@ -0,0 +1,121 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const calculator = document.getElementById('calculator');
+    const unitSelect = document.getElementById('unit');
+    const timeInput = document.getElementById('time');
+    const dateInput = document.getElementById('date');
+    const calculateButton = document.getElementById('calculate');
+    const timeRemaining = document.getElementById('time-remaining');
+    const mode = document.getElementById('mode');
+    const modeToggle = document.getElementById('mode-toggle');
+    const direction = document.getElementById('direction');
+    const currentDateDisplay = document.getElementById('current-date-display');
+    const currentTimeDisplay = document.getElementById('current-time-display');
+
+    // Function to update the current date and time
+    function updateCurrentDateTime() {
+        const currentTime = new Date();
+        const options = { year: 'numeric', month: 'long', day: 'numeric' };
+        const formattedDate = currentTime.toLocaleString("en-UK", options);
+        const formattedTime = currentTime.toLocaleTimeString('en-US', {
+            hour12: false,
+        });
+
+        currentDateDisplay.textContent = formattedDate;
+        currentTimeDisplay.textContent = formattedTime;
+
+        const currentDate = new Date();
+    }
+
+    // Update the current date and time initially
+    updateCurrentDateTime();
+
+    // Set up a timer to update the current date and time every second
+    setInterval(updateCurrentDateTime, 1000);
+
+    // Function to toggle the visibility of the time input based on the selected unit
+    function toggleTimeInputVisibility() {
+        const selectedUnit = unitSelect.value;
+        const dateInput = document.getElementById('dateInput');
+        const timeInput = document.getElementById('timeInput');
+        if (selectedUnit === 'hours') {
+            timeInput.style.display = 'block';
+            dateInput.style.display = 'none';
+        } else {
+            timeInput.style.display = 'none';
+            dateInput.style.display = 'block';
+        }
+    }
+
+    // Initial call to set the initial state
+    toggleTimeInputVisibility();
+
+    // Add an event listener to the unit select to update the visibility when the selection changes
+    unitSelect.addEventListener('change', toggleTimeInputVisibility);
+
+    function calculateTimeRemaining() {
+        const selectedUnit = unitSelect.value;
+        const currentDateTime = new Date();
+
+        let inputDateTime;
+
+        if (selectedUnit === 'hours') {
+            const timeParts = timeInput.value.split(':');
+            inputDateTime = new Date(currentDateTime);
+            inputDateTime.setHours(parseInt(timeParts[0]));
+            inputDateTime.setMinutes(parseInt(timeParts[1]));
+        } else {
+            inputDateTime = new Date(dateInput.value);
+        }
+
+        const timeDifference = inputDateTime - currentDateTime;
+
+        timeDifference < 0
+            ? (direction.textContent = 'Passed')
+            : (direction.textContent = 'Remaining');
+
+        absTimeDifference = Math.abs(timeDifference);
+
+        if (selectedUnit === 'hours') {
+            const hours = Math.floor(absTimeDifference / (1000 * 60 * 60));
+            const minutes = Math.floor((absTimeDifference / (1000 * 60)) % 60);
+            timeRemaining.textContent = `${hours} hours and ${minutes} minutes`;
+        } else if (selectedUnit === 'days') {
+            const days = Math.floor(absTimeDifference / (1000 * 60 * 60 * 24));
+            timeRemaining.textContent = `${days} days`;
+        } else {
+            const years = Math.floor(
+                absTimeDifference / (1000 * 60 * 60 * 24 * 365)
+            );
+            const remainingTimeInMonths = Math.floor(
+                ((absTimeDifference / (1000 * 60 * 60 * 24)) % 365) / 30
+            );
+            const remainingTimeInDays = Math.floor(
+                (absTimeDifference / (1000 * 60 * 60 * 24)) % 30
+            );
+            timeRemaining.textContent = `${years} years and ${remainingTimeInMonths} months and ${remainingTimeInDays} days`;
+        }
+    }
+
+    // Add an event listener to the calculate button
+    calculateButton.addEventListener('click', calculateTimeRemaining);
+
+    timeInput.addEventListener('input', hideCalendar);
+    dateInput.addEventListener('input', hideCalendar);
+
+    function hideCalendar() {
+        if (timeInput.value || dateInput.value) {
+            timeInput.blur();
+            dateInput.blur();
+        }
+    }
+
+    modeToggle.addEventListener('change', () => {
+        document.body.classList.toggle('light-mode');
+        calculator.classList.toggle('light-mode');
+        if (document.body.classList.contains('light-mode')) {
+            mode.innerText = 'Dark';
+        } else {
+            mode.innerText = 'Light';
+        }
+    });
+});
diff --git a/Calculators/Time Remaining/style.css b/Calculators/Time Remaining/style.css
@@ -0,0 +1,81 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #333;
+    text-align: center;
+    display: grid;
+    place-content: center;
+    min-height: 100svh;
+}
+
+.calculator {
+    background-color: #fff;
+    background-color: gray;
+    color: #fff;
+    border-radius: 10px;
+    margin: 20px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    min-height: 75svh;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+
+.mode-switch {
+	align-self: flex-end;
+}
+
+.mode-switch label {
+	cursor: pointer;
+}
+
+input[type='checkbox'] {
+	visibility: hidden;
+}
+
+main {
+	height: 75%;
+	display: grid;
+	place-content: center;
+}
+
+#current-time{
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin-bottom: 10px;
+}
+
+.options,
+.input-section,
+.calculate-button {
+	margin: 20px 0;
+}
+
+select,input,button{
+	padding: 10px;
+	border-radius: .5rem;
+}
+
+.result {
+    margin: 20px 0;
+}
+
+#time-remaining {
+    font-weight: bold;
+}
+
+.light-mode {
+    background-color: #f0f0f0;
+    color: #000;
+}