Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá crianças inocentes! Hoje o desafio é criar um app chamado Animated Countdown, que será responsável por exibir uma contagem regressiva incrível! Vocês já viram como é legal quando estamos esperando ansiosamente por algo e temos uma contagem regressiva para nos ajudar a visualizar o momento chegando? Pois é, essa é a importância desse desafio!

Vocês vão utilizar CSS, JS e HTML para criar uma animação de contagem regressiva em um site. O objetivo é criar um cronômetro que irá decrescer segundos, minutos e horas até chegar em zero. Ah, e lembrem-se de dar um toque especial na animação, deixando-a bem legal e interessante para os olhos do usuário.

As contagens regressivas são importantes porque podem ser utilizadas para diversos fins em desenvolvimento web, como para anunciar lançamentos, promover eventos, gerar expectativas e muito mais. Além disso, elas ajudam a criar uma sensação de urgência e aumentar o engajamento do usuário com o conteúdo do site.

Dicas adicionais para vocês, pequenos programadores: usem o comando setInterval() para criar uma atualização constante na contagem regressiva. E para a parte visual, vocês podem usar a propriedade transform do CSS, combinada com animações para criar um efeito bem bacana.

Agora é hora de colocar a mão na massa! Vamos criar um Animated Countdown incrível!

Exemplo

https://user-images.githubusercontent.com/30157522/224496971-18e3660d-9129-474d-92d2-2e68c30c9bd5.mp4

Additional tips

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>Animated Countdown</title>
  </head>
  <body>
    <div class="counter">
      <div class="nums">
        <span class="in">3</span>
        <span>2</span>
        <span>1</span>
        <span>0</span>
      </div>
      <h4>Get Ready</h4>
    </div>

    <div class="final">
      <h1>GO</h1>
      <button id="replay">Replay</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Equipe Vikings

Resultado

_home_202112130027@ifto local_%C3%81rea%20de%20Trabalho_contagem%20regressiva_index html (1)

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main class="main">
        <div class="container">
            <div class="top">
                <p class="hours">00:00</p>
                <button class="reset-button">Resetar</button>
            </div>
        </div>
    </main>

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

CSS

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body{
    height: 90vh;
}

body, .main{
    background: linear-gradient(90deg, #212171, #3E3E91);
}

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;

}

.container{
    display: flex;
    flex-direction: column;
    background-color: #212171;
    border-radius: 20px;
    width: 300px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.container .hours{
    font-family: 'Share Tech Mono', monospace;
    font-size: 50px;
    color: white;
}

.container .top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 20px 20px 0px 0px;
}

.reset-button{
    display: inline-block;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background-color: #393999;
    color: #FFFFFF;
    width: 100%;
    border-radius: 0px 0px 20px 20px;
}

.reset-button:hover {
    background-color: #171752;;
}

.reset-button:active {
    background-color: #13133f;
    transform: translateY(1px);
}

JS

// Set the date/time to countdown to (1 hour from now)
var countDownDate = new Date().getTime() + (60 * 60 * 1000);

// Update the countdown every second
var countdownInterval = setInterval(function() {

  // Get the current date/time
  var now = new Date().getTime();

  // Calculate the distance between now and the countdown date/time
  var distance = countDownDate - now;

  // Calculate hours, minutes, and seconds
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the countdown in the HTML
  document.querySelector('.hours').textContent = hours.toString().padStart(2, "0") + ':' + minutes.toString().padStart(2, "0") + ':' + seconds.toString().padStart(2, "0");

  // If the countdown is finished, stop updating it
  if (distance < 0) {
    clearInterval(countdownInterval);
    document.querySelector('.hours').textContent = "00:00:00";
  }
}, 1000);

// Reset the countdown when the reset button is clicked
document.querySelector('.reset-button').addEventListener('click', function() {
  countDownDate = new Date().getTime() + (60 * 60 * 1000);
});

iurygdeoliveira / Web-development-classes

36º Desafio: Contagem Regressiva - Peso 2 #41