Sistema de alarme em Javascript

Sistema de alarme em Javascript

Desta vez vamos implementar um Sistema de Alarme em Javascript com o qual você pode facilmente definir a hora em que deseja que o alarme soe, assim que o tempo acabar o sistema reproduzirá um arquivo de áudio.

Esta aplicação é feita em Vanilla Javascript, sem qualquer framework adicional, puro CSS e HTML.

Este software pode ser facilmente implementado localmente, basta baixar os arquivos e depois reproduzir o arquivo index.html, que será aberto no navegador padrão do seu computador.

Demonstração do sistema de alarme em Javascript

Implementei uma demonstração do aplicativo que você pode ver no link a seguir:

https://mauriciosevilla.com/alarma/

Além disso, este aplicativo foi carregado no GitHub Pages, o link é o seguinte:

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

Se você quiser saber como fazer upload de um aplicativo para o GitHub Pages, você pode ver sua documentação oficial no seguinte link:

https://pages.github.com/

Explicação do Sistema de Alarme em Javascript

O sistema tem a hora local do dispositivo a partir do qual a página é aberta, o usuário pode definir a hora expressa em AM, PM, assim que a hora que passa e a hora definida pelo usuário coincidem, um arquivo mp3 é reproduzido, uma música sem direitos autorais legal.

O projeto consiste em três arquivos principais, um index.html, que é o que o usuário final vê, um script.js, onde está localizada a lógica da aplicação, e um arquivo style.css, onde os estilos como a cor de fundo são ajustados . e a proporção do aplicativo.

Toda a lógica é gerada no script.js onde a seleção do usuário é capturada e com um evento onclick um elemento é ativado element.addEventListener quem é quem recebe a seleção do usuário final e com base na coincidência dos parâmetros é enviada a reprodução do arquivo ringtone.mp3 localizado na pasta files

Download e implementação do projeto em JavaScript

Segue o link do repositório onde tenho o projeto postado no GitHub:

Sistema de alarme em Javascript

Como é uma página estática, não é necessário usar backend, não é necessário instalar nenhum servidor, basta baixar o projeto e executar a página index.html

Upload do Sistema de Alarme em Javascript para um Hosting

Em um post anterior eu explico como fazer upload de um projeto semelhante a este para o GitHub Pages. Se você quiser carregá-lo para uma hospedagem como hostinger no vídeo a seguir, explico como fazê-lo:

Carregar página com PHP + banco de dados (MYSQL) para uma hospedagem

Estou atento a qualquer dúvida!

Leave a Reply

O seu endereço de e-mail não será publicado.