⏰ FrontEnd Alarm Clock Using JavaScript
The alarm clock project is a simple web-based application that allows users to set and manage alarms. The user interface consists of a digital clock display, input fields for setting the alarm time, buttons for starting, stopping, and deleting alarms, and a sound or message to indicate when the alarm goes off.
To create the interface, HTML is used to structure the page and define the elements of the user interface, including the clock display, input fields, and buttons. CSS is used to style the interface, making it visually appealing and easy to use.
JavaScript is used to handle the logic of the application, including setting and managing alarms, updating the clock display, and triggering the alarm sound or message. When the user sets an alarm, JavaScript stores the time in a variable and checks it against the current time displayed on the clock. When the alarm time matches the current time, the alarm sound or message is triggered and the user is notified.
Overall, the alarm clock project is a great way to practice using HTML, CSS, and JavaScript to build a functional and interactive web application.
https://alarm-clock-javascript.netlify.app/
- 1️⃣2️⃣ hr / 2️⃣4️⃣ hr Timeing
- ☀ Light / 🌙 dark mode toggle
- 🕣 Digital Clock
- ✅ Set Multiple Alarm / ❎ Delete Alarm
- 💾 Local Storage for ALarm List
- 🔔 Push notification
- Fully Responsive 🖥 Desktop / 💻 Laptop / 📱 Mobile
Clone the project
git clone https://github.com/Ankit6098/Alarmclock-JavaScript.gitGo to the project directory
cd Alarmclock-JavaScriptRun the Application
Run index.htmlAny additional information goes here
LocalStorage is a data storage type of web storage. This allows the JavaScript sites and apps to store and access the data without any expiration date. This means that the data will always be persisted and will not expire. So, data stored in the browser will be available even after closing the browser window.
So here one thing is to notice that after refreshing the page alarm application will not play the audio while alarm is ringing beacuase, there is no method to play an alarm sound without user interaction in modern web browsers, due to security reasons. Browsers have implemented autoplay policies to prevent websites from playing audio or video without user interaction. This policy ensures that web pages do not play any sounds that could be annoying or harmful to users.
One way to work around the autoplay policy is to play the alarm sound as part of an event handler that is triggered by a user interaction. For example, you could create a button that the user has to click to play the sound. Then, when the page refreshes, you could automatically trigger the click event on that button using JavaScript.
It will work in some cases where MEI is a metric that measures a user's media consumption on a website. It tracks how much media content is played with or without user interaction. If a user has a high MEI score on a particular website, the browser will allow autoplaying of media content on that site. This is because the user has demonstrated a preference for consuming media on that site, and the browser assumes that they would like to continue doing so.
You can Check Your MEI chrome://media-engagement/
// Desktop and Laptop
// Tablet
// Mobile
Here are some related projects
I'm a full stack developer...
I'm a full stack developer 😎 ... Love to Develop Classic Unique fascinating and Eye Catching UI 🤩 and Love to Create Projects and Building logics 🧠.
🧠 I'm currently learning FullStack Developer Course from Coding Ninjas
🚀 Visit My Github Profile for more Projects https://github.com/Ankit6098
📫 How to reach me ankitvis609@gmail.com
Java, Javascript, HTML, CSS, Nodejs, ExpressJs, Mongodb, Mongoose...
If you have any feedback, please reach out to us at ankitvis609@gmail.com