En esta ocasión vamos a implementar un Sistema de Alarma en Javascript con el que fácilmente puedes fija la hora a la que deseas que suene la alarma, en cuanto se cumpla la hora el sistema va a reproducir un archivo de audio.

Esta aplicación esta hecha en Vanilla Javascript, sin ningún framework adicional, CSS puro y HTML.

Este software se puede implementar fácilmente a nivel local, basca con descargar los archivos y luego reproducir el archivo index.html, que se abrirá en el navegador por defecto de tu ordenador.

Demo del Sistema de Alarma en Javascript

De la aplicación implementé un demo en GitHub Pages que puedes ver en el siguiente enlace:

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

Si deseas saber como subir una aplicación a GitHub Pages puedes ver su documentación oficial en el siguiente enlace:

https://pages.github.com/

Explicación del Sistema de Alarma en Javascript

El sistema tiene la hora local del dispositivo desde donde se abre la página, el usuario puede fijar la hora expresada en AM, PM, en cuanto la hora que va transcurriendo y la fijada por el usuario coinciden, se reproduce un archivo mp3, una cancion sin copyright agradable.

El proyecto consta de tres archivos principales, un index.html, que es lo que ve el usuario final, uno script.js, donde se encuentra la lógica de la aplicación y uno style.css donde se ajustas los estilos como el color de fondo y la relación de aspecto de la aplicación.

Toda la lógica se genera en el script.js donde se captura la selección del usuario y con un evento onclick se activa un elemento element.addEventListener que es quien recibe la selección del usuario final y con base en la coincidencia de los parametros se envía la reproducción del archivo ringtone.mp3 ubicado en la carpeta files

Descarga he implementación del proyecto en JavaScript

El siguiente es el enlace del repositorio donde tengo el proyecto colgado en GitHub:

Como es una página estática, no se requiere utilizar un backend, no debes instalar ningún servidor basta con descargar el proyecto y ejecutar la página index.html

Subida del Sistema de Alarma en Javascript a un Hosting

En una publicación previa explico como subir un proyecto similar a este a GitHub Pages. Si deseas subirlo a un hosting como hostinger en el siguiente vídeo explico la forma de hacerlo:

Cualquier duda quedo al pendiente !!