Como Cria um Relógio digital com HTML, CSS e JavaScript
Você já se perguntou como funciona a logica de progrmação de um relógio digital? Neste tutorial, vamos explorar como criar um relógio digital simples utilizando JavaScript e CSS. Vamos mergulhar no passo a passo para construir seu próprio relógio digital e testar suas funcionalidades.
Configuração do Projeto
Para começar, crie uma pasta para o seu projeto e dentro dela crie três arquivos: index.html, style.css, e script.js. Esses arquivos serão os blocos de construção do nosso relógio digital.
meu-relogio/
├── index.html
├── style.css
└── script.jsEntendendo o Básico: HTML Estrutural
Antes de começarmos a programar, precisamos configurar a estrutura básica do nosso relógio digital. Usaremos HTML para isso. Abra o arquivo index.html e insira o seguinte código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Relógio Digital</title>
</head>
<body>
<div class="clock">
<div class="time" id="time">12:00:00</div>
</div>
<script src="script.js"></script>
</body>
</html>Essa estrutura define um elemento div com a classe clock que contém outro elemento div com a classe time onde o horário será exibido.
E aqui está o resultado:
Estilização com CSS
Agora, vamos estilizar o nosso relógio digital. No arquivo style.css, adicione o seguinte código CSS:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
}
.clock {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.time {
font-size: 2rem;
text-align: center;
}Esta estilização alinha nosso relógio ao centro da tela e aplica algumas formatações visuais para torná-lo atraente.
E aqui está o resultado:
Utlizando a Lógica com JavaScript
Agora, é hora de adicionar funcionalidade ao nosso relógio digital. No arquivo script.js, insira o seguinte código JavaScript:
function updateTime() {
const timeElement = document.getElementById('time');
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
timeElement.textContent = timeString;
}
setInterval(updateTime, 1000); // Atualiza a cada segundo
updateTime(); // Chama a função para exibir o tempo atual imediatamente
Este código JavaScript cria uma função updateTime() que obtém a hora atual, minutos e segundos, formata-os como uma string de horário e, em seguida, atualiza o conteúdo do elemento com o ID time. A função setInterval é usada para atualizar o relógio a cada segundo.
E aqui está o resultado:
Agora que tudo está configurado, abra o arquivo HTML em seu navegador e veja a mágica acontecer! Você terá um relógio digital funcional na tela, atualizando automaticamente a cada segundo.
Clique aqui para ver a calculadora funcionando na pártica.
Conclusão
Desenvolver projetos práticos como este relógio digital é a manier amais eficaz de aprender programação. Isso porque projetos práticos envolvem a aplicação de conceitos teóricos em situações do mundo real, o que ajuda a consolidar o conhecimento de forma mais eficaz.
A criação deste relógio digital envolveu o uso de HTML para estruturar a página, CSS para estilizar o relógio e JavaScript para adicionar funcionalidade. Ao seguir este tutorial, você ganhou experiência prática em todas essas tecnologias.
Se você deseja aprender programação do zero ao profissional, inscreva-se no treinamento FullStack Develeper. Nele vai desenvolver diversos projetos prárticos utilizando as tecnologicas mais atuais do mercado como: HTML, CSS, JavaScript, React, Node.js, MongoDB e outros. Clique aqui ou no banner abaixo para garanti a sua vaga!
Artigos Relacionados
Sobre o Autor
DICA EXTRA!!!Algumas pessoas estão nos perguntando qual é o curso que recomendamos para quem deseja aprender programação, mesmo sem ter qualquer conhecimento sobre o assunto. Nossa recomendação, tanto para quem está iniciando, como para quem já possui mais experiência, é essa AQUI!
0 Comentários