Desafio Relógio Analógico

Relógio analógico com ponteiros dinâmicos e sincronização em tempo real.

Lógica de Desenvolvimento

1. Estrutura Base

<div class="clock-face">
  <div class="marker"><div class="marker-dot"></div></div>
  <!-- 12x -->
  <div class="number"><span class="number-text">1</span></div>
  <!-- 12x -->
  <div class="hand hour-hand"></div>
  <div class="hand minute-hand"></div>
  <div class="hand second-hand"></div>
  <div class="center-pin"></div>
</div>

2. Matemática dos Ponteiros

O círculo tem 360°, dividido em 12 horas = 30° por hora.

Fórmulas:

• Segundos: segundos × 6° (60 segundos = 360°)
• Minutos: minutos × 6° (60 minutos = 360°)
• Horas: (horas % 12) × 30° + minutos × 0.5°

3. Posicionamento CSS

.marker:nth-child(1) {
  transform: rotate(30deg);
}
.marker:nth-child(2) {
  transform: rotate(60deg);
}
/* ... até 360deg */

4. JavaScript Dinâmico

class Clock {
  updateClock = (time) => {
    const [hours, minutes, seconds] = [
      time.getHours(),
      time.getMinutes(),
      time.getSeconds(),
    ];
    const angles = [
      (hours % 12) * 30 + minutes * 0.5,
      minutes * 6,
      seconds * 6,
    ];

    [this.hourHand, this.minuteHand, this.secondHand].forEach((hand, i) => {
      hand.style.transform = `translateX(-50%) rotate(${angles[i]}deg)`;
    });
  };
}

Tecnologias

• CSS Grid: Centralização perfeita
• CSS Gradients: Efeitos visuais modernos
• ES6+: Arrow functions, destructuring, async/await
• WorldTime API: Sincronização precisa

Design

• Fundo: Preto com gradiente radial
• Ponteiros: Branco (horas), roxo (minutos), cinza (segundos)
• Efeitos: Glow neon em todos os elementos
• Centralização: CSS Grid com place-items: center

Arquivos

• index.html - Estrutura semântica
• style.css - Estilos modernos (150 linhas)
• main.js - Lógica dinâmica (30 linhas)

Desenvolvido por

Renato Khael