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.
38 lines
1.2 KiB
JavaScript
38 lines
1.2 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);
|
|
const currentDate = new Date();
|
|
|
|
// Function to calculate percentage
|
|
function calculatePercentage(current, start, end) {
|
|
const passedTime = current - start;
|
|
const totalDuration = end - start;
|
|
return (passedTime / totalDuration) * 100;
|
|
}
|
|
|
|
// Function to set progress bar width and color
|
|
function setProgressBar(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 {
|
|
progressBar.classList.add('bg-red-500');
|
|
}
|
|
}
|
|
|
|
if (endDate <= currentDate) {
|
|
progressBar.style.width = "100%";
|
|
progressBar.classList.add('bg-red-500');
|
|
} else if (startDate > currentDate) {
|
|
progressBar.style.width = "0%";
|
|
} else {
|
|
const percentage = calculatePercentage(currentDate, startDate, endDate);
|
|
setProgressBar(percentage);
|
|
}
|