Uma página web com o objetivo de apresentar ao usuário o horário e data de seu sistema em tempo real, no qual, conforme ao passar dos quatro períodos do dia (manhã, tarde, noite e madrugada), o layout do site se altera, representando o período respectivo.
Esse projeto foi criado com inspiração nas aulas do canal "Curso em Vídeo", do profº Gustavo Guanabara, com uma sugestão de exercício proporcionado em sua série de vídeoaulas.
Nesse sentido, desenvolvi ainda mais o meu conhecimentos em Javascript nas suas funções, métodos e sintaxe, sendo o principal recurso a função Date() e o métodos toLocaleDateString() e toLocaleTimeString(), o mais interessante para mim durante o desenvolvimento, foi explorar as diversas maneiras de manipulá-lo, desde Arrays() até esses métodos que descobri conforme estudava mais a documentação.
Coloquei em uso também boas práticas de organização do código, utilizando o Padrão BEM nos seletores, criando variáveis CSS globais para cores e fontes, importando o arquivo reset.css para normalizar/padronizar todos os elementos em diferentes navegadores e estruturando semânticamente o HTML.
- Apresentação dos 4 layouts dos períodos do dia:
periodos_do_dia.mp4
| Madrugada | Manhã | Tarde | Noite |
|---|---|---|---|
| 00h às 06h | 06h às 12h | 12h às 18h | 18h às 24h |
- Apresentação de como funciona a página em diferentes dispositivos:
periodos_do_dia_responsividade.mp4
