Alarm System in Javascript

This time we are going to implement an Alarm System in Javascript with which you can easily set the time at which you want the alarm to sound, as soon as the time is up the system will play an audio file.

This application is made in Vanilla Javascript, without any additional framework, pure CSS and HTML.

This software can be easily implemented locally, just download the files and then play the index.html file, which will open in your computer's default browser.

Demo of the Alarm System in Javascript

I implemented a demo of the application that you can see in the following link:

https://mauriciosevilla.com/alarma/

In addition, this application has been uploaded to GitHub Pages, the link is as follows:

https://configuroweb.github.io/alarma/

If you want to know how to upload an application to GitHub Pages, you can see its official documentation at the following link:

https://pages.github.com/

Explanation of the Alarm System in Javascript

The system has the local time of the device from which the page is opened, the user can set the time expressed in AM, PM, as soon as the time that passes and the time set by the user coincide, an mp3 file is played, a song no copyright nice.

The project consists of three main files, an index.html, which is what the end user sees, a script.js, where the application logic is located, and a style.css file, where the styles such as the background color are adjusted. and the aspect ratio of the application.

All the logic is generated in the script.js where the user selection is captured and with an event onclick an element is activated element.addEventListener who is the one who receives the selection of the end user and based on the coincidence of the parameters the reproduction of the file is sent ringtone.mp3 located in the folder files

Download and implementation of the project in JavaScript

The following is the repository link where I have the project posted on GitHub:

Sistema hecho el javascript de alarma
https://github.com/configuroweb/alarma
0 forks.
0 stars.
0 open issues.

Recent commits:

• primera version funcional sistema de alarma hecho en Javascript, Mauricio

As it is a static page, it is not necessary to use a backend, you do not have to install any server, just download the project and run the page index.html

Upload of the Alarm System in Javascript to a Hosting

In a previous post I explain how to upload a project similar to this to GitHub Pages. If you want to upload it to a hosting like hostinger in the following video I explain how to do it:

I'm on the lookout for any questions!