-
-
Notifications
You must be signed in to change notification settings - Fork 133
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #387 from aweSAM-XS/time-remaining
Time remaining
- Loading branch information
Showing
8 changed files
with
301 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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! |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'; | ||
} | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |