Time card calculator

HTML code of Time card calculator

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Company Time Card Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
}
#container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
font-weight: bold;
}
input[type=”time”] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}
.total-day-hours {
margin-top: 20px;
font-weight: bold;
}
.subtotal {
margin-top: 10px;
font-weight: bold;
}
.day-container {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id=”container”>
<h2>Company Time Card Calculator</h2>
<div id=”days-container”>
<!– Day wise inputs will be added here –>
</div>
<button onclick=”addDay()”>Add Day</button>
<button onclick=”calculateTotalHours()”>Calculate Total Hours</button>
<button onclick=”clearForm()”>Refresh Form</button>
<p id=”total-hours” class=”subtotal”></p>
<p id=”error-msg” class=”error”></p>
</div>

<script>
var daysCount = 1;

function addDay() {
var daysContainer = document.getElementById(“days-container”);
var dayDiv = document.createElement(“div”);
dayDiv.classList.add(“day-container”);
dayDiv.id = `day-container-${daysCount}`;
dayDiv.innerHTML = `
<h3>Day ${daysCount}</h3>
<label for=”start-time-${daysCount}”>Start Time:</label>
<input type=”time” id=”start-time-${daysCount}”>
<label for=”end-time-${daysCount}”>End Time:</label>
<input type=”time” id=”end-time-${daysCount}”>
<p id=”total-hours-${daysCount}” class=”total-day-hours”></p>
<button onclick=”deleteDay(${daysCount})”>Delete Day</button>
`;
daysContainer.appendChild(dayDiv);
daysCount++;
}

function deleteDay(day) {
var dayContainer = document.getElementById(`day-container-${day}`);
if (dayContainer) {
dayContainer.remove();
calculateTotalHours(); // Recalculate total hours after deleting a day
}
}

function calculateTotalHours() {
var totalHours = 0;
var totalMinutes = 0;
var errorMsg = “”;
var subtotals = [];

for (var i = 1; i < daysCount; i++) {
var startTime = document.getElementById(`start-time-${i}`).value;
var endTime = document.getElementById(`end-time-${i}`).value;

if (!startTime || !endTime) {
errorMsg = “Please enter both start and end times for all days.”;
break;
}

var start = new Date(“2024-01-01T” + startTime + “:00”);
var end = new Date(“2024-01-01T” + endTime + “:00”);

if (end <= start) {
errorMsg = “End time must be later than start time for all days.”;
break;
}

var diff = (end.getTime() – start.getTime()) / 1000;
var hours = Math.floor(diff / 3600);
var minutes = Math.floor((diff % 3600) / 60);

totalHours += hours;
totalMinutes += minutes;
subtotals.push(hours + minutes / 60);

document.getElementById(`total-hours-${i}`).innerText = `Total Hours: ${hours} hours and ${minutes} minutes`;
}

if (totalMinutes >= 60) {
totalHours += Math.floor(totalMinutes / 60);
totalMinutes = totalMinutes % 60;
}

if (errorMsg) {
document.getElementById(“error-msg”).innerText = errorMsg;
document.getElementById(“total-hours”).innerText = “”;
} else {
document.getElementById(“error-msg”).innerText = “”;
document.getElementById(“total-hours”).innerText = `Grand Total Hours Worked: ${totalHours} hours and ${totalMinutes} minutes`;
calculateSubtotals(subtotals);
}
}

function calculateSubtotals(subtotals) {
var subtotalHours = subtotals.reduce((acc, val) => acc + val, 0);
document.getElementById(“total-hours”).innerText += ` | Subtotal Hours Worked: ${subtotalHours.toFixed(2)} hours`;
}

function clearForm() {
var daysContainer = document.getElementById(“days-container”);
daysContainer.innerHTML = “”; // Clear the contents of days-container
daysCount = 1; // Reset the days count
document.getElementById(“total-hours”).innerText = “”; // Clear total hours
document.getElementById(“error-msg”).innerText = “”; // Clear error message
}
</script>
</body>
</html>

Read More: Click here

Leave a Comment