search

iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 41 forks source link

29º Desafio: Relógio - Peso 2 #34

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, jovens padawans da programação!

Se vocês já estão cansados de ficar olhando para o celular para ver as horas, que tal criarmos um relógio para o nosso site? Nesse desafio, vocês vão precisar utilizar seus conhecimentos de CSS, JS e HTML para criar um relógio digital com design bonito e moderno.

Mas cuidado, não vale usar frameworks prontos! Vamos fazer tudo na mão, para treinar bem as suas habilidades.

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Theme Clock</title>
  </head>
  <body>
    <!-- Inspired by this dribbble shot https://dribbble.com/shots/5958443-Alarm-clock -->

    <button class="toggle">Dark mode</button>

    <div class="clock-container">
      <div class="clock">
        <div class="needle hour"></div>
        <div class="needle minute"></div>
        <div class="needle second"></div>
        <div class="center-point"></div>
      </div>

      <div class="time"></div>
      <div class="date"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Exemplo CPT2303111158-250x309

E lembrem-se, programação é como a vida, o tempo passa rápido demais. Então, bora fazer esse relógio funcionar!

Additional tips

Como dicas adicionais, sugiro que utilizem os comandos de CSS para posicionar e estilizar os elementos, e os comandos de JS para atualizar o horário em tempo real. Vocês também podem usar o método setInterval() do JS para atualizar o relógio a cada segundo.

rafaelnamel0 commented 1 year ago

Equipe ThreeCoders

RESULTADO FINAL: https://rafaelnamel0.github.io/DESAFIO-29/

Código: https://github.com/rafaelnamel0/DESAFIO-29

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, jovens padawans da programação!

Se vocês já estão cansados de ficar olhando para o celular para ver as horas, que tal criarmos um relógio para o nosso site? Nesse desafio, vocês vão precisar utilizar seus conhecimentos de CSS, JS e HTML para criar um relógio digital com design bonito e moderno.

Mas cuidado, não vale usar frameworks prontos! Vamos fazer tudo na mão, para treinar bem as suas habilidades.

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Theme Clock</title>
  </head>
  <body>
    <!-- Inspired by this dribbble shot https://dribbble.com/shots/5958443-Alarm-clock -->

    <button class="toggle">Dark mode</button>

    <div class="clock-container">
      <div class="clock">
        <div class="needle hour"></div>
        <div class="needle minute"></div>
        <div class="needle second"></div>
        <div class="center-point"></div>
      </div>

      <div class="time"></div>
      <div class="date"></div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Exemplo CPT2303111158-250x309 CPT2303111158-250x309

E lembrem-se, programação é como a vida, o tempo passa rápido demais. Então, bora fazer esse relógio funcionar!

Additional tips

Como dicas adicionais, sugiro que utilizem os comandos de CSS para posicionar e estilizar os elementos, e os comandos de JS para atualizar o horário em tempo real. Vocês também podem usar o método setInterval() do JS para atualizar o relógio a cada segundo.

resposta aceita