diff --git a/Calculators/Time Remaining/README.md b/Calculators/Time Remaining/README.md
new file mode 100644
index 0000000..9928b13
--- /dev/null
+++ b/Calculators/Time Remaining/README.md
@@ -0,0 +1,44 @@
+# Time Remaining Calculator
+
+
+
+
+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 [sam.kiprop23@gmail.com](mailto:sam.kiprop23@gmail.com).
+
+## 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
new file mode 100644
index 0000000..b3154b6
Binary files /dev/null and b/Calculators/Time Remaining/images/dark-mode.PNG differ
diff --git a/Calculators/Time Remaining/images/favicon.png b/Calculators/Time Remaining/images/favicon.png
new file mode 100644
index 0000000..1396f1b
Binary files /dev/null and b/Calculators/Time Remaining/images/favicon.png differ
diff --git a/Calculators/Time Remaining/images/light-mode.PNG b/Calculators/Time Remaining/images/light-mode.PNG
new file mode 100644
index 0000000..2cb69d4
Binary files /dev/null and b/Calculators/Time Remaining/images/light-mode.PNG differ
diff --git a/Calculators/Time Remaining/images/mobile.png b/Calculators/Time Remaining/images/mobile.png
new file mode 100644
index 0000000..644dbe4
Binary files /dev/null and b/Calculators/Time Remaining/images/mobile.png differ
diff --git a/Calculators/Time Remaining/index.html b/Calculators/Time Remaining/index.html
new file mode 100644
index 0000000..632faa7
--- /dev/null
+++ b/Calculators/Time Remaining/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+ Time Remaining Calculator
+
+
+
+
+
+
+
+
+
Time Remaining Calculator
+
+
+
+
Today
+
Current Date:
+
Current Time:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Time :
+
+
+
+
+
+
diff --git a/Calculators/Time Remaining/script.js b/Calculators/Time Remaining/script.js
new file mode 100644
index 0000000..34ea2e9
--- /dev/null
+++ 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
new file mode 100644
index 0000000..8161a53
--- /dev/null
+++ 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;
+}