Cuenta regresiva

cuenta-regresiva.markdown

Cuenta regresiva

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<div class="cuenta-regresiva">
  10
</div>
<div class="borde-giratorio"></div>

script.js

// Hacer una cuenta regresiva que vaya de 10 a 0, actualizando cada 1 segundo
// el contenido del elemento cuya clase es .cuenta-regresiva.

// Para escribir el contenido de un elemento: .innerHTML

// Machete:
// Para ejecución diferida: setTimeout(function() { ... }, tiempo);
// Para ejecución cíclica: setInterval(function() { ... }, tiempo);

// Para detener ejecución cíclica: clearInterval(nombreDeVariableDondeSeGuardóElInterval);

let contador= 10;
let cuentaRegresiva = document.querySelector('.cuenta-regresiva');
let ciclo = setInterval (function(){  
  contador -=1;
  cuentaRegresiva.innerHTML = contador;
  if(contador === 0) {
    clearInterval(ciclo);
  }
}, 1000);

  
  

style.css

* {
  box-sizing: border-box;
} 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  background: #6d8fff;
  justify-content: center;
  align-items: center;
}

.cuenta-regresiva {
  font-size: 10rem;
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff;
}

.borde-giratorio {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15rem;
  height: 15rem;
  border: 5px solid #fff;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  border-radius: 50%;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: 1s rotate infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}