Craft a dynamic countdown timer that blinks using CSS

Question

Craft a dynamic countdown timer that blinks using CSS

I am attempting to design a blinking countdown timer that starts at 5 seconds and disappears when it reaches 0.

CSS:

.blinky {
    transition: 1s opacity;
    -moz-transition: 1s opacity;
    -webkit-transition: 1s opacity;
}

HTML:

<div id="countdown" class="blinky">

JS:

const cdStart = 5;
countdown.innerHTML = cdStart;
countdown.style.opacity = 0;
for (var i = cdStart - 1; i > 0; i--) {
    setTimeout(
        (x) => {
            countdownTime.innerHTML = x;
            countdown.classList.remove('blinky');
            countdown.style.opacity = 1;
            countdown.classList.add('blinky');
            countdown.style.opacity = 0;
        },
        1000 * (cdStart - i),
        i
    );
}

The goal is for the timer to display 5, fade out, show 4, fade out, display 3, fade out, show 2, fade out, and finally reveal 1 before disappearing. Each new number should instantly appear without fading back in. To achieve this, the "blinky" class is removed and added accordingly before adjusting the opacity.

However, the current setup only shows 5 and then stops functioning. Removing the opacity manipulation results in a functional countdown from 3 to 1. So I attempted to separate the class removal and addition events:

CSS:

.blinky {
    transition: .9s opacity;
    -moz-transition: .9s opacity;
    -webkit-transition: .9s opacity;
}

JS:

const cdStart = 5;
countdownTime.innerHTML = cdStart;
countdown.style.opacity = 0;
for (var i = cdStart - 1; i > 0; i--) {
    setTimeout(
        (x) => {
            countdownTime.innerHTML = x;
            countdown.classList.remove('blinky');
            countdown.style.opacity = '';
        },
        1000 * (cdStart - i),
        i
    );
    setTimeout(() => {
        countdown.classList.add('blinky');
        countdown.style.opacity = 0;
    }, 1000 * (cdStart - i) + 100);
}

With this attempt, I observed 5 fading out and then a delay before 1 appeared and faded away.

Is there a more reliable method to achieve the desired functionality here?

javascript css

Answer 1

Answer №1

Utilizing CSS Animations allows you to achieve a subtle fade-out effect every time the counter changes.

Include an animation with 5 iterations and monitor the animationiteration and animationend events. These events trigger each time the animation loops or finishes playing.

Update the count and adjust the text content of the countdown in both event handlers. Delete the .blinky class once the animation completes.

const countdown = document.querySelector('#countdown');
let count = 5;

function updateCount() {
  countdown.textContent = --count;
}

function removeBlinky() {
  countdown.classList.remove('blinky');
}

countdown.textContent = count;
countdown.addEventListener('animationiteration', updateCount);
countdown.addEventListener('animationend', () => {
  updateCount();
  removeBlinky();
});

@keyframes blink-out {
  0%, 25% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

#countdown {
  font-size: 48px;
}

.blinky {
  animation: blink-out 1s ease-out forwards 5;
}

<div id="countdown" class="blinky"></div>

Answer 2

Utilizing CSS Animations allows you to achieve a subtle fade-out effect every time the counter changes.

Include an animation with 5 iterations and monitor the animationiteration and animationend events. These events trigger each time the animation loops or finishes playing.

Update the count and adjust the text content of the countdown in both event handlers. Delete the .blinky class once the animation completes.

const countdown = document.querySelector('#countdown');
let count = 5;

function updateCount() {
  countdown.textContent = --count;
}

function removeBlinky() {
  countdown.classList.remove('blinky');
}

countdown.textContent = count;
countdown.addEventListener('animationiteration', updateCount);
countdown.addEventListener('animationend', () => {
  updateCount();
  removeBlinky();
});

@keyframes blink-out {
  0%, 25% {
    opacity: 1;
  }
  
  100% {
    opacity: 0;
  }
}

#countdown {
  font-size: 48px;
}

.blinky {
  animation: blink-out 1s ease-out forwards 5;
}

<div id="countdown" class="blinky"></div>

Answer 3

Answer №2

It appears that I have understood the task correctly:

let timer = document.getElementById('countdown');
let secondsLeft = 5;
timer.innerText = secondsLeft;
timer.classList.add('countdown-animation');
const interval = setInterval(()=>{
secondsLeft--;
timer.innerText = secondsLeft;
if(!secondsLeft)
   stopCountdown();
},1000)
function stopCountdown(){
 timer.classList.remove('countdown-animation');
 clearInterval(interval);
}

.timer{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.countdown-animation{
  animation:1s fade-out ease;
  animation-iteration-count:infinite;
  animation-fill-mode:forwards;
}
#countdown{
font-size:10rem;
}
@keyframes fade-out{
from{opacity:1}
99%{opacity:0}
to{opacity:1}
}

<body>
<div class="timer">
<span id="countdown"></span>
</div>
</body>

Answer 4

It appears that I have understood the task correctly:

let timer = document.getElementById('countdown');
let secondsLeft = 5;
timer.innerText = secondsLeft;
timer.classList.add('countdown-animation');
const interval = setInterval(()=>{
secondsLeft--;
timer.innerText = secondsLeft;
if(!secondsLeft)
   stopCountdown();
},1000)
function stopCountdown(){
 timer.classList.remove('countdown-animation');
 clearInterval(interval);
}

.timer{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.countdown-animation{
  animation:1s fade-out ease;
  animation-iteration-count:infinite;
  animation-fill-mode:forwards;
}
#countdown{
font-size:10rem;
}
@keyframes fade-out{
from{opacity:1}
99%{opacity:0}
to{opacity:1}
}

<body>
<div class="timer">
<span id="countdown"></span>
</div>
</body>

Answer 5

Answer №3

Here is a demonstration utilizing async functions and css transitions to manage fading effects.

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
const findElement = str => document.querySelector(str);
const button = findElement("button");
const numDisplay = findElement(".number");
const DELAY_TIME = 1000;

async function modifyNumber(newNum) {
    numDisplay.classList.add("fade");
    await wait(DELAY_TIME);
    numDisplay.textContent = newNum;
    numDisplay.classList.remove("fade");
    await wait(DELAY_TIME);

}

async function countdown(startNum) {
  const INITIAL_VALUE = startNum;
  numDisplay.textContent = INITIAL_VALUE;
  await wait(DELAY_TIME);
  for (let countVal = INITIAL_VALUE - 1; countVal >= 0; countVal--) {
    await modifyNumber(countVal);
  }
}

button.addEventListener("click", async () => {
  button.disabled = true;
  await countdown(5);
  button.disabled = false;
});

.timer {
  display: grid;
  place-items: center;

  width: 100px;
  height: 150px;
  border-radius: 20px;
  border: 5px solid lightgreen;
}

.number {
  font-size: 5rem;
  font-family: monospace;
  transition: opacity 1s;
}

.number.fade {
  opacity: 0;
}

<div class="timer">
  <span class="number"></span>
</div>
<br />
<button>count from 5!</button>

Answer 6

Here is a demonstration utilizing async functions and css transitions to manage fading effects.

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
const findElement = str => document.querySelector(str);
const button = findElement("button");
const numDisplay = findElement(".number");
const DELAY_TIME = 1000;

async function modifyNumber(newNum) {
    numDisplay.classList.add("fade");
    await wait(DELAY_TIME);
    numDisplay.textContent = newNum;
    numDisplay.classList.remove("fade");
    await wait(DELAY_TIME);

}

async function countdown(startNum) {
  const INITIAL_VALUE = startNum;
  numDisplay.textContent = INITIAL_VALUE;
  await wait(DELAY_TIME);
  for (let countVal = INITIAL_VALUE - 1; countVal >= 0; countVal--) {
    await modifyNumber(countVal);
  }
}

button.addEventListener("click", async () => {
  button.disabled = true;
  await countdown(5);
  button.disabled = false;
});

.timer {
  display: grid;
  place-items: center;

  width: 100px;
  height: 150px;
  border-radius: 20px;
  border: 5px solid lightgreen;
}

.number {
  font-size: 5rem;
  font-family: monospace;
  transition: opacity 1s;
}

.number.fade {
  opacity: 0;
}

<div class="timer">
  <span class="number"></span>
</div>
<br />
<button>count from 5!</button>

Craft a dynamic countdown timer that blinks using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Keep your data safe and protected within a Node CLI application

Can I increase the top margin by more than mt-5?

I must first log a variable using console.log, then execute a function on the same line, followed by logging the variable again

Ensure that the submit button triggers the display of results with each click

Exploring the best practices for loading state from local storage in VueJS/NuxtJS by leveraging the "useLocalStorage" utility

saving numeric values and text to a document using node.js

Attempting to move elements into an array for storage in the local storage

How are jQuery.ajax and XMLHttpRequest different from each other?

Ways to launch numerous URLs in express.js

Is it possible to execute in a specific context using npm?

What is the best way to make the background color of section 1/2 cover the entire screen?

The initial attempt to use autocomplete with Jquery UI is not functioning as expected upon entry

Tips for formatting JSON using jQuery

meteor Error: IDENTIFIER is missing

Tips for CSS: Preventing onhover animation from resetting with each hover

Unable to access property 'map' of undefined - having trouble mapping data retrieved from Axios request

Error Connecting to Database with Node.JS MySQL Module - ECONNRESET Issue

AngularJS: Display the last four characters of a string and substitute the rest with 'X'

Adjust the sizing of all fonts following the switch in font styles

Guide to aligning a container to the left in Bootstrap 5