How to Add a Countdown Timer in Slater for Webflow

Implementing a countdown timer in the DD:HH:MM:SS format is straightforward with Slater for Webflow. Follow the steps below to add a dynamic countdown timer to your Webflow site.

Countdown Timer Code Example

Insert the following code into your project to display a countdown timer:

html

function pad(num) {
return num < 10 ? "0" + num : num;
}

function updateCountdown() {
var now = new Date();
var diff = targetDate - now;

if (diff <= 0) {
  document.getElementById("countdown").textContent = "00:00:00:00";
  clearInterval(timer);
  return;
}

var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
var minutes = Math.floor((diff / (1000 * 60)) % 60);
var seconds = Math.floor((diff / 1000) % 60);

document.getElementById("countdown").textContent =
  pad(days) + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);

}

updateCountdown();
var timer = setInterval(updateCountdown, 1000);

How to Use with Slater

To add this countdown timer to your Webflow project using Slater:

  • Create a new JavaScript file and paste the code above into the file.
  • Attach the script to the Webflow pages where you want the countdown to appear.
  • Customize the countdown target date by adjusting the targetDate value in the script.
  • Style the #countdown element with custom CSS for your preferred appearance.

Customization Tips

  • Change the targetDate variable to match your desired countdown target.
  • Update CSS to style the countdown (e.g., font size, color, spacing).

Example CSS:

css
#countdown {
font-size: 2rem;
color: #333;
letter-spacing: 2px;
}

Resources