Skip to content

Commit 953c7d1

Browse files
satyam-sethsatyam-seth
authored
Merge pull request #61 from satyam-seth-learnings/notification-api
Notification API Example
2 parents b537605 + 9a20cc4 commit 953c7d1

File tree

11 files changed

+777
-8
lines changed

11 files changed

+777
-8
lines changed

‎Notification API/Levelup Blog/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Reference Links
2+
3+
- MDN: [Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API)
4+
5+
- [medium.com (levelup) Blog](https://levelup.gitconnected.com/creating-browser-notification-in-javascript-79e91bfb76c8)

‎Notification API/demo.html‎ renamed to ‎Notification API/Levelup Blog/demo.html‎

File renamed without changes.

‎Notification API/script.js‎ renamed to ‎Notification API/Levelup Blog/script.js‎

File renamed without changes.

‎Notification API/style.css‎ renamed to ‎Notification API/Levelup Blog/style.css‎

File renamed without changes.

‎Notification API/MDN Doc/demo.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=380" />
6+
<script src="scripts.js"></script>
7+
<title>To-do list with Notifications</title>
8+
<!-- Icon originated from design by Sabine Wollender: http://thenounproject.com/wosamo/ -->
9+
<link rel="icon" type="image/png" href="img/icon-128.png" />
10+
<link
11+
href="https://fonts.googleapis.com/css?family=Donegal+One|Lily+Script+One"
12+
rel="stylesheet"
13+
type="text/css"
14+
/>
15+
<link href="style.css" type="text/css" rel="stylesheet" />
16+
</head>
17+
<body>
18+
<h1>To-do list</h1>
19+
20+
<div class="task-box">
21+
<ul id="task-list"></ul>
22+
</div>
23+
24+
<div class="form-box">
25+
<h2>Add new to-do item.</h2>
26+
27+
<form id="task-form" action="index.html">
28+
<div class="full-width">
29+
<label for="title">Task title:</label
30+
><input type="text" id="title" required />
31+
</div>
32+
<div class="half-width">
33+
<label for="deadline-hours">Hours (hh):</label
34+
><input type="number" id="deadline-hours" required />
35+
</div>
36+
<div class="half-width">
37+
<label for="deadline-minutes">Mins (mm):</label
38+
><input type="number" id="deadline-minutes" required />
39+
</div>
40+
<div class="third-width">
41+
<label for="deadline-day">Day:</label>
42+
<select id="deadline-day" required>
43+
<option value="01">01</option>
44+
<option value="02">02</option>
45+
<option value="03">03</option>
46+
<option value="04">04</option>
47+
<option value="05">05</option>
48+
<option value="06">06</option>
49+
<option value="07">07</option>
50+
<option value="08">08</option>
51+
<option value="09">09</option>
52+
<option value="10">10</option>
53+
<option value="11">11</option>
54+
<option value="12">12</option>
55+
<option value="13">13</option>
56+
<option value="14">14</option>
57+
<option value="15">15</option>
58+
<option value="16">16</option>
59+
<option value="17">17</option>
60+
<option value="18">18</option>
61+
<option value="19">19</option>
62+
<option value="20">20</option>
63+
<option value="21">21</option>
64+
<option value="22">22</option>
65+
<option value="23">23</option>
66+
<option value="24">24</option>
67+
<option value="25">25</option>
68+
<option value="26">26</option>
69+
<option value="27">27</option>
70+
<option value="28">28</option>
71+
<option value="29">29</option>
72+
<option value="30">30</option>
73+
<option value="31">31</option>
74+
</select>
75+
</div>
76+
77+
<div class="third-width">
78+
<label for="deadline-month">Month:</label>
79+
<select id="deadline-month" required>
80+
<option value="January">January</option>
81+
<option value="February">February</option>
82+
<option value="March">March</option>
83+
<option value="April">April</option>
84+
<option value="May">May</option>
85+
<option value="June">June</option>
86+
<option value="July">July</option>
87+
<option value="August">August</option>
88+
<option value="September">September</option>
89+
<option value="October">October</option>
90+
<option value="November">November</option>
91+
<option value="December">December</option>
92+
</select>
93+
</div>
94+
95+
<div class="third-width">
96+
<label for="deadline-year">Year:</label>
97+
<select id="deadline-year" required>
98+
<option value="2025">2025</option>
99+
<option value="2024">2024</option>
100+
<option value="2023">2023</option>
101+
<option value="2022">2022</option>
102+
<option value="2021">2021</option>
103+
<option value="2020">2020</option>
104+
<option value="2019">2019</option>
105+
<option value="2018">2018</option>
106+
</select>
107+
</div>
108+
109+
<div><input type="submit" id="submit" value="Add Task" /></div>
110+
<div></div>
111+
</form>
112+
</div>
113+
114+
<div id="toolbar">
115+
<ul id="notifications"></ul>
116+
117+
<button id="enable">Enable notifications</button>
118+
</div>
119+
</body>
120+
</html>

‎Notification API/MDN Doc/img/icon-128.png‎

3.24 KB
Loading

0 commit comments

Comments
 (0)