Countdown to next month - progress bar - JavaScript

user_16588608 0
Viewed 549

I am very new to HTML and have found a few tutorials online on how to make progress bars for various uses - but have found nothing for long time countdowns; (One day to another day).

I want a progress bar countdown to next month. E.g, if today was April 15, the progress bar would be 50% filled, since the next month is 15 days away.

Ideally, the countdown will start on the left using a specific time on a certain day as a starting point and move toward the right as time continues - arriving at the end when the countdown is up and the time on the specific second date has arrived. The time should also be specific to EST not the local time on the computer.

Any help with this would be greatly appreciated thanks!!

web progress-bar css html javascript
1 Answers

You'll have to:

  • Calculate how many days until the next month.

    This is achieved by getting the current date (via the Date constructor) and getting the current month (with Date.getMonth()), then constructing a new date via the Date constructor and adding 1 to the current month index. This is what nextMonth is in the example below.

  • Calculate the number of days between the next month and the current day

    This is slightly more tricky. You'll have to get the millisecond difference between the two dates (by subtracting the results returned by Date.getTime() for the current date and the next month), then dividing by 1000 (to get the seconds), 60 (for minutes), 60 again (for hours), and finally dividing by 24 (for days).

  • Calculate the number of days in the current month

    This is done by setting the month to one month later than the current month, and the date to 0. Why? When 0 is provided for dayValue, the date will be set to the last day of the previous month, and since we set the month to the next month, it will return the last day of the current month. Calling getDate() then returns the day of the month.

To make the progress bar, you can simply use the <progress> element. Set the maximum to the number of days in the current month and the value to the number of days minus the days until the next month (how many days have passed in this month so far).

const now = new Date();
const nextMonth = new Date(now.getFullYear(), now.getMonth() + 1, 1);
const diffDays = Math.ceil(Math.abs(nextMonth.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
now.setMonth(now.getMonth() + 1);
now.setDate(0);
const daysInCurrentMonth = now.getDate();
progress.max = daysInCurrentMonth;
progress.value = daysInCurrentMonth - diffDays;

/* below for debug purposes only */

console.log('Days in current month: ' + daysInCurrentMonth);
console.log('Days until next month: ' + diffDays);
#progress {
  width: 100%;
}
<progress id="progress"></progress>

user_142512210
Related