Initialize year selection to current year

[dipikabh]

This is a follow up to #371, which was loading 2030 as the starting year in the form, picking from the first option in the HTML drop-down list.

This PR:

• Sets the year on form load to the current year as well as after a to-do entry.
• Updates the list of years in the drop-down to an ascending order.

Motivation

To avoid future updates to this UI every time the year changes

Additional details

The app link can be accessed at https://mdn.github.io/dom-examples/to-do-notifications/

[dipikabh]

I've changed this line (instead of hard-coding it to a year)

[dipikabh]

reordered this list to be in ascending order

[pepelsbey]

Looks good! Thank you 😊

I have another idea: we can avoid changing the dates altogether, even in 2030!

This will generate a list of 13 options, starting with the current year (2026–2038)

  // Populate year options: current year and 12 years into the future
  const currentYear = new Date().getFullYear();
  for (let i = 0; i <= 12; i++) {
    const option = document.createElement("option");
    const yearValue = currentYear + i;
    option.value = yearValue;
    option.textContent = yearValue;
    year.appendChild(option);
  }

And then we set it:

  year.value = currentYear;

I would remove all the pre-filled years from HTML too and leave the <select> empty.

I wish I could’ve suggested it, but GitHub won’t allow it 🥲

[dipikabh]

Sorry it took me a while to get back to this task.
Thanks for the review and nice suggestion! I've made the suggested updates.

I've added 2 more files to this PR:

• to-do-notifications/README.md: Updated the description and added a link to the corresponding page in content
• Repo README.md: An entry for this app was missing

I'll open a content PR to make sure the tutorial there reflects the same code.