How Do I Add a Countdown Timer to Webflow?

by

Are you looking to add a countdown timer to your Webflow website? Countdown timers can be a great way to create urgency and excitement for events, product launches, or limited-time offers. In this tutorial, we will guide you through the process of adding a countdown timer to your Webflow site using HTML and CSS.

Step 1: Create the HTML Structure

First, let’s set up the basic HTML structure for our countdown timer. We will use a combination of <div> and <span> elements to create the timer.

HTML:

<div class="countdown">
  <span id="days"></span> days
  <span id="hours"></span> hours
  <span id="minutes"></span> minutes
  <span id="seconds"></span> seconds
</div>

In the above code, we have created a <div class="countdown"> element that contains four <span> elements with unique ids (days, hours, minutes, and seconds). These will display the remaining time in days, hours, minutes, and seconds respectively.

Step 2: Styling the Countdown Timer with CSS

CSS:

.countdown {
  font-family: Arial, sans-serif;
  font-size: 18px;
  text-align: center;
  margin-top: 20px;
}countdown span {
  display: inline-block;
  padding: 10px;
  background-color: #333;
  color: #fff;
  margin-right: 10px;
}countdown span:last-child {
  margin-right: 0;
}

In the CSS code above, we have styled the countdown timer. We set the font family to Arial or a sans-serif font, and the font size to 18 pixels. The .countdown class is aligned to the center and has a top margin of 20 pixels.

The .countdown span selector styles each <span> element within the countdown div. We set them to display as inline-block elements with a padding of 10 pixels. The background color is set to #333 (dark gray) with white text color, creating a visually appealing contrast.countdown span:last-child selector removes the right margin from the last <span> element in order to prevent unnecessary spacing.

Step 3: Adding JavaScript for Countdown Functionality

Note: To add JavaScript functionality, we will use an external library called Moment.js. Make sure you include it in your project before proceeding with this step.

JavaScript:

// Set the date and time for the countdown
var countdownDate = moment('2022-12-31T23:59:59');

// Update the countdown every second
var countdownTimer = setInterval(updateCountdown, 1000);

function updateCountdown() {
  // Get current date and time
  var now = moment();

  // Calculate the remaining time
  var remainingTime = countdownDate.diff(now);

  // Convert remaining time to days, hours, minutes, and seconds
  var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
  var hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

  // Display the remaining time in the countdown div
   document.getElementById('days').innerHTML = days;
   document.getElementById('hours').innerHTML = hours;
   document.getElementById('minutes').innerHTML = minutes;
   document.getElementById('seconds').innerHTML = seconds;

   // If the countdown is over, display a message
   if (remainingTime < 0) {
     clearInterval(countdownTimer);
     document.getElementById('countdown').innerHTML = 'The countdown is over!';
   }
}

In the JavaScript code above, we use Moment.js to handle date and time calculations. We set the desired countdown date and time using the moment() function. The updateCountdown() function is then called every second to calculate the remaining time and update the display.

We calculate the days, hours, minutes, and seconds by performing mathematical operations on the difference between the countdown date and current date (countdownDate.diff(now)). Finally, we update the HTML content of each <span> element with their respective values.

If the remaining time is less than zero (remainingTime < 0), we clear the interval to stop the countdown and display a message in the countdown div.

Step 4: Implementing the Countdown Timer in Webflow

To implement the countdown timer in your Webflow site, follow these steps:

  1. Add an HTML embed element to your desired location on the page.
  2. Paste the HTML code from Step 1 into the embed element.
  3. Add a custom attribute to the embed element called data-countdown.
  4. Add a custom code block to your page's footer code section or project settings (before ) with the following JavaScript:
<script>
   var countdownElements = document.querySelectorAll('[data-countdown]');
   for (var i = 0; i < countdownElements.length; i++) {
     var countdownDate = moment(countdownElements[i].dataset.countdown);
     var countdownTimer = setInterval(updateCountdown, 1000);

     function updateCountdown() {
       // Remaining time calculation and display
     }
   }
</script>

In this JavaScript code, we select all elements with the data-countdown attribute using document.querySelectorAll('[data-countdown]'). We then loop through each element, set the countdown date using countdownElements[i].countdown, and call the updateCountdown() function at a one-second interval. You can add multiple countdown timers by duplicating and modifying this block of code.

Congratulations!

You have successfully added a visually engaging countdown timer to your Webflow site. Experiment with different CSS styles to match the timer with your website's design. You can also customize the countdown date and time by modifying the moment() function parameters in the JavaScript code.

Note: Remember to include the Moment.js library in your project for the countdown timer to work properly.

Happy coding!