You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
const startDateElement = document.querySelector(".startDate");
|
|
const endDateElement = document.querySelector(".endDate");
|
|
|
|
const mainBar = document.querySelector(".mainBar");
|
|
const progressBar = document.querySelector(".progressBar");
|
|
|
|
const startDate = new Date(startDateElement.textContent);
|
|
const endDate = new Date(endDateElement.textContent);
|
|
|
|
// Get the current date
|
|
const currentDate = new Date();
|
|
|
|
if (endDate <= currentDate) {
|
|
// If the end date is before or equal to the current date
|
|
progressBar.style.width = "100%";
|
|
progressBar.classList.add('bg-red-500');
|
|
} else if (startDate > currentDate) {
|
|
// If the start date is after the current date
|
|
progressBar.style.width = "0%";
|
|
} else {
|
|
// Calculate the passed time in milliseconds
|
|
const passedTime = currentDate - startDate;
|
|
|
|
// Calculate the total project duration in milliseconds
|
|
const totalDuration = endDate - startDate;
|
|
|
|
// Calculate the percentage of passed time
|
|
const percentage = (passedTime / totalDuration) * 100;
|
|
|
|
// Set the width of progressBar based on the percentage
|
|
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');
|
|
}
|
|
} |