O intuito desse projeto é o estudo em JavaScript sobre datas e horas. Também sobre ancoragem com CSS e ocultação de conteúdo conforme a seleção do usuário. A proposta desse projeto se trata de 4 tipos de relógios (Digital, Cronômetro, Cronômetro Regressivo e Relógio Analógico) que podem ser selecionados em um menu com 4 opções.
-
Menu: ao selecionar uma opção a mesma fica com uma cor diferente para mostrar qual relógio está selecionado. E na barra do navegador fica mostrando a URL de qual relógio está selecionado. Se o usuário enviar o link para outra pessoa com qualquer uma das opções selecionada, quando essa pessoa abrir o link irá abrir no relógio que está na URL. Caso sejá enviado somente o link https://taissonso.github.io/clock/ irá abrir por padrão o relógio analógico.
-
Relógio Digital: mostra as horas, minutos e segundos em formato digital.
-
Cronômetro: Ao clicar no botão 'Start', começa a contagem do tempo apartir dos segundos. O botão 'Start' é ocultado e então os dois botões de 'Pause' e 'Stop' são mostrados. O botão 'Pause', pausa o tempo (dãããã) e o botão 'Stop' oculta os botões 'Pause' e 'Stop' mostra o botão 'Start' e zera o cronômetro.
-
Cronômetro Regressivo: tem três inputs de entrada para horas, minutos e segundos. O input de horas aceita até 4 digitos, os inputs de minutos e segundos aceitam somente dois digitos e no máximo até 59, caso o usuário tente digitar um valor maior que 59 o input limpa o campo do último digito, não deixando o usuário inserir esse valor. Os botões funcionam do mesmo modo que no cronômetro.
-
Relógio Analógico: mostra a hora atual no formato analógico, com ponteiros, números e casas dos minutos feitas com CSS.
🔴OBSERVAÇÃO🔴 a imagem do Favicon foi retirada do site Flaticon - Clique aqui e será redirecionado para o icone.
Agradecimento: Se você leu até aqui, eu só tenho a agradecer pelo seu tempo em ver esse projeto, que me ajudou muito nos meus estudos e aprendizado. Se tiver alguma dúvida, sugestão ou critíca construtiva, por favor entre em contado, é sempre bom trocar idéias e conhecimento com o próximo. Obrigado!
☕ 💾 💻 🎉 🎮