Time Calculator Tool
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Set up font and background */
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f7fc;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Main container for the tool */
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}
/* Title styling */
h1 {
color: #5c6bc0;
margin-bottom: 20px;
font-size: 1.5em;
}
/* Calculator styling */
.calculator {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Input fields styling */
.time-input {
padding: 10px;
font-size: 1em;
border: 2px solid #ccc;
border-radius: 5px;
margin: 5px 0;
width: 100%;
}
.time-input:focus {
border-color: #5c6bc0;
}
/* Buttons container styling */
.operations {
display: flex;
justify-content: space-between;
gap: 10px;
}
/* Button styling */
.btn {
background-color: #5c6bc0;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
width: 48%;
font-size: 1em;
}
.btn:hover {
background-color: #3f51b5;
}
/* Result section styling */
.result {
margin-top: 20px;
}
#calculated-time {
font-size: 1.5em;
color: #3f51b5;
font-weight: bold;
}
// Function to add time
function addTime(startTime, hours, minutes) {
const start = new Date();
const [startHours, startMinutes] = startTime.split(':').map(Number);
start.setHours(startHours, startMinutes, 0, 0);
const addedTime = new Date(start.getTime() + (hours * 60 * 60 * 1000) + (minutes * 60 * 1000));
return formatTime(addedTime);
}
// Function to subtract time
function subtractTime(startTime, hours, minutes) {
const start = new Date();
const [startHours, startMinutes] = startTime.split(':').map(Number);
start.setHours(startHours, startMinutes, 0, 0);
const subtractedTime = new Date(start.getTime() - (hours * 60 * 60 * 1000) - (minutes * 60 * 1000));
return formatTime(subtractedTime);
}
// Function to format time as HH:MM
function formatTime(date) {
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
return `${hours}:${minutes}`;
}
// Event listeners for buttons
document.getElementById('add-time').addEventListener('click', function() {
const startTime = document.getElementById('start-time').value;
const hours = parseInt(document.getElementById('hours').value) || 0;
const minutes = parseInt(document.getElementById('minutes').value) || 0;
if (!startTime) {
alert('Please enter a start time!');
return;
}
const result = addTime(startTime, hours, minutes);
document.getElementById('calculated-time').textContent = result;
});
document.getElementById('subtract-time').addEventListener('click', function() {
const startTime = document.getElementById('start-time').value;
const hours = parseInt(document.getElementById('hours').value) || 0;
const minutes = parseInt(document.getElementById('minutes').value) || 0;
if (!startTime) {
alert('Please enter a start time!');
return;
}
const result = subtractTime(startTime, hours, minutes);
document.getElementById('calculated-time').textContent = result;
});
