Why this matters
Every Friday the owner of Northgate Bookkeeping (made up) checks which client invoices are coming due and which are already late: open each invoice, add 30 days on a calendar, count the days. It is slow, and a late invoice slips through now and then.
Dates are just numbers to JavaScript, so a few lines can add 30 days to every invoice date, count the days left from today and write a reminder list. In this module you build it in JSFiddle, typing every line yourself.
What you’ll build
A small page that lists each open invoice with its due date and either "due in N days" or "OVERDUE by N days".
With the sample data (today fixed at 24 October 2026): Maple Dental OVERDUE by 14 days, Cobalt Legal due in 4 days, Harbor Accounting due in 21 days.
What you need
- Nothing to start the practiceThe practice is built from real JSFiddle screens and runs in this page.
- A browser, to do it for realJSFiddle is free and needs no account for this.
Concepts
3 ideas you’ll use in the practice.
Dates you can add to
new Date('2026-09-10T00:00') makes a date at midnight local time. d.setDate(d.getDate() + 30) adds 30 days and handles month ends for you: 10 September plus 30 days is 10 October.
The lesson fixes today at 24 October 2026 so your answers match ours. For real use, write const today = new Date(); and it is always the real today.
Counting days between dates
Subtracting two dates gives milliseconds. There are 86,400,000 milliseconds in a day, so (due - today) / 86400000 is the number of days, and Math.round tidies the result. A negative number means the due date has passed.
Small functions, one job each
dueDate works out a date, daysLeft counts days, remind writes one line. Each can be checked on its own, and the Net 30 rule lives in one place. The ? : in remind picks between two texts: OVERDUE when the days are below zero, otherwise "due in".
Practice
Do every step yourself in a practice copy of the real tool. It checks your work, and “Do it for me” finishes any step you get stuck on.
Do it for real
Now repeat it in your own account. Tick each step as you go.
Quick check
3 questions to check you’ve got it.
1. What does d.setDate(d.getDate() + 30) do?
- Sets the day of the month to 30
- Adds 30 days, rolling into the next month if needed
- Subtracts 30 days
Show the answer
Adds 30 days, rolling into the next month if needed. getDate is the day of the month; adding 30 and setting it back rolls over the month end correctly.
2. daysLeft returns -14. What does the reminder say?
- due in 14 days
- OVERDUE by 14 days
- Nothing
Show the answer
OVERDUE by 14 days. Below zero means the due date has passed, so note becomes OVERDUE by 14 days (the minus sign is removed with -left).
3. Why is today fixed to 24 October 2026 in the lesson?
- JavaScript cannot read the real date
- So your answers match the lesson; at work you use new Date()
- Invoices only work in October
Show the answer
So your answers match the lesson; at work you use new Date(). new Date() with nothing in the brackets gives the real current date and time.
JavaScript: Pull Contacts from an API into a Table
Next: data that comes from another system, fetched from an API into a table.
Start module 3 →