Como Cria um Relógio digital com HTML, CSS e JavaScript

Robson dos Santos 18/09/2023 0 Comentários Leitura: 3 min

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.js

Entendendo 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:

relogio digital html css javascript - Como Cria um Relógio digital com HTML, CSS e JavaScript

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:

relogio digital html css javascript 1 - Como Cria um Relógio digital com HTML, CSS e JavaScript

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:

relogio digital html css javascript 2 - Como Cria um Relógio digital com HTML, CSS e JavaScript

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!

Configuração do Projeto

Entendendo o Básico: HTML Estrutural

Estilização com CSS

Utlizando a Lógica com JavaScript

Conclusão

Deixe um comentário Cancelar resposta