Create A Countdown Timer with HTML

Popular for webinars, event launches, and whatever else you want to count down to, it is a super simple code snippet you can add and edit in your Squarespace site! This week's tutorial breaks down the code you add as a code block, what elements of your site it uses, and how to edit the message delivered at the end of the countdown. 

Watch the tutorial video below to learn all about this HTML snippet, and when you are ready, copy and paste the code below to make your own countdown timer!


 
 

<center><h2 id="timer"></h2></center>

<script>var countDownDate = new Date("Jan 1, 2021 13:13:13").getTime();var x = setInterval(function() {

var now = new Date().getTime();var distance = countDownDate - now;var days = Math.floor(distance / (1000 * 60 * 60 * 24));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);document.getElementById("timer").innerHTML = days + "d " + hours + "h "+ minutes + "m " + seconds + "s ";

if (distance < 0) {clearInterval(x);document.getElementById("timer").innerHTML = "Hint: change this to whatever you want to say when the timer is up!";} }, 1000); </script>

Ready for more?

This tutorial is a bonus code from my CSS Cheat Sheet!

You have probably spent hours tracking down code fixes one by one. Scouring YouTube and Pinterest and Forums for something close enough that you could figure out a way to make it work. That was how I spent the first 5 years of my career, and I am never wasting time like that again.  To make my life way easier (and believe me - it has) I  finally put all my pro tips and tested codes into one PDF and figured hey, other designers need this too!

So, you can join me every week for the next few years,  learning codes bit by bit. Or just download this PDF and get back to building the best website ever.  Here’s a free pro tip fro one designer to another - save your time for your actual design.