Creating JavaScript Alarm Web Application With Sound Notification From Scratch | HTML-CSS-JS

Hello Developers I hope you have a wonderful day welcome to gilgeekify, my name is Saeed Kohansal, and in this video, I will create an alarm web application with sound notification from scratch using Vanilla JavaScript, This is a client-side web application, I'm using localStorage from HTML Web Storage API to save my data inside the browser, The localStorage object stores data with no expiration date so we have all data we need in the user's browser, I will create three sections for my web application, an option to set the alarm, an option to see the active alarm, and an option to display a full-screen alarm notification and play sound automatically...

----------------------------------------
▶ TABLE OF CONTENTS
----------------------------------------
0:00 Introduction And Preview
0:33 Project Parts
0:55 Starting From Scratch With HTML
2:40 HTML Preview
2:51 Starting CSS
9:09 Checking All Options
9:55 Starting JavaScript
9:58 JavaScript [ User Gesture Handler ]
11:20 JavaScript [ Display Options - Logic By localStorage ]
13:35 JavaScript [ Display Hours And Minutes Inside Select Inputs ]
15:42 JavaScript [ Getting And Saving Data From The User ]
18:10 How To Check The Browser localStorage Data?
18:54 JavaScript [ Display Notification And Auto Play Audio ]
20:35 JavaScript [ Adding Audio File Source Link ]
20:43 App Testing By Set A Real Alarm
21:13 A Cool Notification With Auto-Playing Sound
21:34 Testing Alarm Stop Button

-------------------------
🤖 LIVE DEMO
-------------------------

------------------------------
👨‍💻 SOURCE CODE
------------------------------

------------------------------
🔗 USEFUL LINKS
------------------------------

If You Enjoy My Content, Please Support Me 😍🙏

💙 PAYPAL DONATION

❤️ PATREON

💛 BUY ME A COFFEE

🪙 My Public Address To Receive BTC • Bitcoin
bc1qerc5ev074cqknu9nz589w4vjf5ecmhuc2df83h

🥈 My Public Address To Receive ETH • Ethereum
0x566A47B9731209A5144336D274D44224bfb9C0ea

#javascript #programming #frontend #js #html #css #webapplication #howtocode #tutorial #education #webdevelopment #gilgeekify