document.addEventListener("DOMContentLoaded", function() { // Function to calculate progress and update progress bar function calculateProgress(startDate, endDate, progressBar) { const currentDate = new Date(); if (endDate <= currentDate) { progressBar.style.width = "100%"; progressBar.classList.add('bg-red-500'); } else if (startDate > currentDate) { progressBar.style.width = "0%"; } else { const passedTime = currentDate - startDate; const totalDuration = endDate - startDate; const percentage = (passedTime / totalDuration) * 100; progressBar.style.width = percentage + "%"; if (percentage <= 50) { progressBar.classList.add('bg-green-700'); } else if (percentage <= 80) { progressBar.classList.add('bg-yellow-400'); } else if (percentage <= 100) { progressBar.classList.add('bg-red-500'); } } } function updateAllProjectProgress() { const projectContainers = document.querySelectorAll(".projectContainer"); projectContainers.forEach(projectContainer => { const startDateElement = projectContainer.querySelector(".startDate"); const endDateElement = projectContainer.querySelector(".endDate"); const progressBar = projectContainer.querySelector(".progressBar"); const startDate = new Date(startDateElement.textContent); const endDate = new Date(endDateElement.textContent); calculateProgress(startDate, endDate, progressBar); }); } updateAllProjectProgress(); });