Skip to content

Initialize year selection to current year #372

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dipikabh wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Initialize year selection to current year #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bc8ef16
initialize year to current
dipikabh Jan 8, 2026
c40dd57
apply code review feedback
dipikabh Jan 28, 2026
56cc289
apply code review feedback
dipikabh Jan 28, 2026
60a62d5
update app readme, add link to content tutorial
dipikabh Jan 28, 2026
309f50c
add directory entry to the list in repo readme
dipikabh Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ Do not specify supported browsers and their versions in code comments or prose,
- The "edit-context" directory contains examples demonstrating the [EditContext API](https://developer.mozilla.org/docs/Web/API/EditContext_API). See the [list of examples](https://github.com/mdn/dom-examples/tree/main/edit-context/).

- The "file-system-api" directory contains multiple examples demonstrating usage of the [File System API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API):

- [createSyncAccessHandle() mode test](https://mdn.github.io/dom-examples/file-system-api/createsyncaccesshandle-mode/): Demonstrates usage of [FileSystemFileHandle.createSyncAccessHandle()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle/createSyncAccessHandle)
- [createWritable() mode test](https://mdn.github.io/dom-examples/file-system-api/createwritable-mode/): Demonstrates usage of [FileSystemFileHandle.createWritable()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle/createWritable)
- [FileSystemHandle.remove() demo](https://mdn.github.io/dom-examples/file-system-api/filesystemhandle-remove/): Demonstrates usage of [FileSystemHandle.remove()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemHandle/remove)
Expand Down Expand Up @@ -78,7 +77,6 @@ Do not specify supported browsers and their versions in code comments or prose,
- The "navigation-api" directory contains a basic example that demonstrates some features of the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API). [Run the demo live](https://mdn.github.io/dom-examples/navigation-api/).

- The "notifications" directory contains one example showing how to make and handle persistent notifications, and another showing how to make and handle non-persistent notifications, using the [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API).

- [Run the persistent notifications demo](https://mdn.github.io/dom-examples/notifications/persistent/).
- [Run the non-persistent notifications demo](https://mdn.github.io/dom-examples/notifications/non-persistent/)

Expand Down Expand Up @@ -110,6 +108,8 @@ Do not specify supported browsers and their versions in code comments or prose,

- The "touchevents" directory is for examples and demos of the [Touch Events](https://developer.mozilla.org/docs/Web/API/Touch_events) standard.

- The "to-do-notifications" directory contains a to-do list notifications app demonstrating [IndexedDB API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) for data storage and [Notifications API](https://developer.mozilla.org/docs/Web/API/Notifications_API) for deadline alerts. See [Checking when a deadline is due](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Checking_when_a_deadline_is_due) for a detailed walkthrough.

- The "viewport-segments-api" directory contains an example demonstrating how to use the [Viewport Segments API](https://developer.mozilla.org/docs/Web/API/Viewport_Segments_API). [Run the example live](https://mdn.github.io/dom-examples/viewport-segments-api/).

- The "view-transitions" directory contains examples and demos of the [View Transition API](https://developer.mozilla.org/docs/Web/API/View_Transition_API) standard. Go to the [View transition API demo index](https://mdn.github.io/dom-examples/view-transitions/) to see what's available.
Expand All @@ -121,7 +121,6 @@ Do not specify supported browsers and their versions in code comments or prose,
- The "web-storage" directory contains a basic demo to show usage of the Web Storage API. For more detail on how it works, read [Using the Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). [View the demo live](https://mdn.github.io/dom-examples/web-storage/).

- The "view-transitions" directory contains demos to show usage of the [View Transitions API](https://developer.mozilla.org/docs/Web/API/View_Transitions_API):

- View transitions in a [single-page app](https://mdn.github.io/dom-examples/view-transitions/spa/)
- View transitions in a [multiple-page app](https://mdn.github.io/dom-examples/view-transitions/mpa/)
- Another example of view transitions in a [simple multiple-page app](https://mdn.github.io/dom-examples/view-transitions/mpa-homepage/)
Expand Down
11 changes: 4 additions & 7 deletions to-do-notifications/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
to-do-notifications
===================
# to-do-notifications

This is an Enhanced version of my basic to-do app, which stores to-do items via IndexedDB, and then also aims to provide notifications when to-do item deadlines are up, via the Notification and Vibration APIs.
This is a to-do list notifications application that stores to-do items via [IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) and provides notifications when to-do item deadlines are up via the [Notifications](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) and [Vibration](https://developer.mozilla.org/docs/Web/API/Vibration_API) APIs.

The IndexedDB and Notification API functionality all works on Firefox desktop, Firefox Android, Firefox OS, Chrome, and IE 10+.
[View the demo live](https://mdn.github.io/dom-examples/to-do-notifications/).

The Vibration API stuff works on Firefox OS and Firefox for Android.

You can [try it out live](https://mdn.github.io/dom-examples/to-do-notifications/).
See [Checking when a deadline is due](https://developer.mozilla.org/docs/Web/API/IndexedDB_API/Checking_when_a_deadline_is_due) for a detailed walkthrough explaining how this app works.
132 changes: 63 additions & 69 deletions to-do-notifications/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
<!DOCTYPE HTML>
<html lang="en-US">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=380">
<script src="scripts/todo.js"></script>
<title>To-do list with Notifications</title>
<!-- Icon originated from design by Sabine Wollender: http://thenounproject.com/wosamo/ -->
<link rel="icon" type="image/png" href="img/icon-128.png">
<link href='https://fonts.googleapis.com/css?family=Donegal+One|Lily+Script+One' rel='stylesheet' type='text/css'>
<link href="style/style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=380">
<script src="scripts/todo.js"></script>
<title>To-do list with Notifications</title>
<!-- Icon originated from design by Sabine Wollender: http://thenounproject.com/wosamo/ -->
<link rel="icon" type="image/png" href="img/icon-128.png">
<link href='https://fonts.googleapis.com/css?family=Donegal+One|Lily+Script+One' rel='stylesheet' type='text/css'>
<link href="style/style.css" type="text/css" rel="stylesheet">
</head>

<body>

<h1>To-do list</h1>
<h1>To-do list</h1>

<div class="task-box">
<div class="task-box">

<ul id="task-list">
<ul id="task-list">

</ul>
</ul>

</div>
</div>

<div class="form-box">
<h2>Add new to-do item.</h2>
<div class="form-box">
<h2>Add new to-do item.</h2>

<form id="task-form" action="index.html">
<div class="full-width"><label for="title">Task title:</label><input type="text" id="title" required></div>
<div class="half-width"><label for="deadline-hours">Hours (hh):</label><input type="number" id="deadline-hours" required></div>
<div class="half-width"><label for="deadline-minutes">Mins (mm):</label><input type="number" id="deadline-minutes" required></div>
<div class="third-width"><label for="deadline-day">Day:</label>
<form id="task-form" action="index.html">
<div class="full-width"><label for="title">Task title:</label><input type="text" id="title" required></div>
<div class="half-width"><label for="deadline-hours">Hours (hh):</label><input type="number" id="deadline-hours"
required></div>
<div class="half-width"><label for="deadline-minutes">Mins (mm):</label><input type="number" id="deadline-minutes"
required></div>
<div class="third-width"><label for="deadline-day">Day:</label>
<select id="deadline-day" required>
<option value="01">01</option>
<option value="02">02</option>
Expand Down Expand Up @@ -62,55 +66,45 @@ <h2>Add new to-do item.</h2>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select></div>

<div class="third-width"><label for="deadline-month">Month:</label>
<select id="deadline-month" required>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select></div>

<div class="third-width"><label for="deadline-year">Year:</label>
<select id="deadline-year" required>
<option value="2030">2030</option>
<option value="2029">2029</option>
<option value="2028">2028</option>
<option value="2027">2027</option>
<option value="2026">2026</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select></div>

<div><input type="submit" id="submit" value="Add Task"></div>
<div></div>
</form>
</div>

<div id="toolbar">
<ul id="notifications">

</ul>

<button id="enable">
Enable notifications
</button>
</div>
</select>
</div>

<div class="third-width"><label for="deadline-month">Month:</label>
<select id="deadline-month" required>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
</div>

<div class="third-width"><label for="deadline-year">Year:</label>
<select id="deadline-year" required></select>
</div>

<div><input type="submit" id="submit" value="Add Task"></div>
<div></div>
</form>
</div>

<div id="toolbar">
<ul id="notifications">

</ul>

<button id="enable">
Enable notifications
</button>
</div>

</body>

</html>
Loading