Countdown Timer - Squarespace Wedding Website

After getting engaged last year, I immediately started working on our wedding website using Squarespace - their templates are beautiful and I wanted to save some time by not having to build anything from scratch. 

Despite many tools being available to users on Squarespace, one pivotal thing they were missing was the ability to have a countdown timer on your wedding website; a somewhat common asset. I Googled searched and asked the forum for resources to no avail - I found bits and pieces of code I scrapped together, but couldn't for the life of me get it to appear on the page. If there is one thing about Squarespace that ISN'T easy, it's editing HTML.

Eventually, I enlisted the help of my developer friend Greg, who got it showing up and functioning perfectly. Since then, I have received numerous emails/Facebook messages about this timer and decided to share the code here for reference.

STEP 1

Paste this code in the header, which can be found via Settings > Advanced > Code Injection - it gets pasted into the first box.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function makeTimer() {

var endTime = new Date("September 17, 2017 12:00:00 EST");
var endTime = (Date.parse(endTime)) / 1000;

var now = new Date();
var now = (Date.parse(now) / 1000);

var timeLeft = endTime - now;

var days = Math.floor(timeLeft / 86400); 
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }

$("#days").html(days + "<span>Days</span>");
$("#hours").html(hours + "<span>Hours</span>");
$("#minutes").html(minutes + "<span>Minutes</span>");
$("#seconds").html(seconds + "<span>Seconds</span>");
}

setInterval(function() { makeTimer(); }, 1000);
</script>

STEP 2

Then put this code in the custom CSS area, which can be found via Design > Custom CSS > Paste code into white box.

/* COUNTDOWN TIMER CSS */

#timerbox{
    position:relative;  
    width: 445px;
    margin: 0 auto;
    margin-left:170px;
    margin-top:-63vh;
     z-index:3;
}

#timer {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index:4;

div {
    z-index:50;
    display: table-cell;

// STYLE NUMBERS
    font-size: 90px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #fff;
    padding: 20px;
    border-radius: 300px;
    text-align: center;
    span {

// STYLES DAYS, HOURS, MINUTES, SECONDS
    letter-spacing: 3px;
    color: #d6d6d7;
    font-size: 16px;
    margin-left: -4px;
    margin-top: 40px;
    display: block;
    text-transform:uppercase;
    }
   }
  }

@media (max-width : 667px) {
    #timer {
    div {
    padding: 16px;
    font-size: 26px !important;
    span {
    margin-top: 2px;
    font-size: 12px !important;
    }
   }
  }
}
/* END OF COUNTDOWN TIMER CSS */

STEP 3

Now to get it to appear, go to the page you want the timer to be and add a “Code Block” via SquareSpace’s content block options (like you would to add text or an image). Looks like this where it says “Code.” 

Click that and then delete the “Hello world” that will come up. Replace with this code:

<div id="timer"> 
    <div id="days"></div>
     <div id="hours"></div>
    <div id="minutes"></div>
    <div id="seconds"></div>
</div>

Refresh and it should appear. It might appear somewhere weird depending on how your site is structured, but some adjusting of the positioning should do it.

You can see it functioning here.

Also, you'll need to change the hex values to change colors. The default will be white, so if you don't see it appear and have a white page, try changing the text color first :)  

Hope that helps! If you've used this timer, please check out more of Greg's work by getting in touch with him via email: ggvigeant@gmail.com


I wasn't expecting this post to get as popular as it did, and I'm doing my best to answer questions as they come up with the help of some developer friends. That being said, I've added a few answers below to some frequently asked questions, which may help achieve anything additional for the timer you might be looking for.

Store Hours

Someone asked if they could use this timer to countdown until a store's opening. Here is javascript code that will countdown to the stores opening time based on the weekly time schedule ('storeHours') in the first section of the code. There are placeholder comments where user messaging can be displayed for when the store is currently open, as well as when the store is closed for the day.

You should be able to replace my countdown timer's javascript with this code instead. You may need to play around with the CSS for any styling.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
// Store hours weekly schedule.
var storeHours = [
{
open: '00:00:00 EST', // Closed on Sunday
close: '00:00:00 EST'
},
{
open: '08:00:00 EST', // Monday: 8am - 6pm
close: '18:00:00 EST'
},
{
open: '08:00:00 EST', // Tuesday: 8am - 6pm
close: '18:00:00 EST'
},
{
open: '08:00:00 EST', // Wednesday: 8am - 6pm
close: '18:00:00 EST'
},
{
open: '08:00:00 EST', // Thursday: 8am - 6pm
close: '18:00:00 EST'
},
{
open: '08:00:00 EST', // Friday: 8am - 6pm
close: '18:00:00 EST'
},
{
open: '00:00:00 EST', // Closed on Saturday
close: '00:00:00 EST'
}
];

// Get the store hours of the current day.
function getStoreHours() {
var today = new Date(),
year = today.getFullYear(),
month = today.toLocaleString('en-us', {month: "long"}),
day = today.toString().split(' ')[2],
open = storeHours[today.getDay()].open,
close = storeHours[today.getDay()].close;

    var todaysHours = {
        open: month + ' ' + day + ', ' + year + ', ' + open,
        close: month + ' ' + day + ', ' + year + ', ' + close
    };

    window.interval = setInterval(function() {
        makeTimer(todaysHours);
    }, 1000);
}

// Create/update the countdown clock.
function makeTimer(storeHours) {
var now = new Date();
var now = (Date.parse(now) / 1000);

// var openTime = new Date(storeHours),
var openSeconds = Date.parse(new Date(storeHours.open)) / 1000,
        closedSeconds = Date.parse(new Date(storeHours.close)) / 1000,
        timeTillOpen = openSeconds - now,
        timeTillClosed = now - closedSeconds;

var days = Math.floor(timeTillOpen / 86400); 
var hours = Math.floor((timeTillOpen - (days * 86400)) / 3600);
var minutes = Math.floor((timeTillOpen - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeTillOpen - (days * 86400) - (hours * 3600) - (minutes * 60)));

// If the desired date/time has been reached, stop the counter.
if (timeTillOpen &lt; 0) {
    days = hours = minutes = seconds = 0;
    clearInterval(window.interval);

    // Optionally display user messaging.
    if (timeTillClosed &gt; 0) {
        // Optionally display "Sorry, We're Closed" message here...
    } else {
        // Optionally display "Open Now" message...
    }
}

if (hours &lt; "10") { hours = "0" + hours; }
if (minutes &lt; "10") { minutes = "0" + minutes; }
if (seconds &lt; "10") { seconds = "0" + seconds; }

$("#days").html(days + "&lt;span&gt;Days&lt;/span&gt;");
$("#hours").html(hours + "&lt;span&gt;Hours&lt;/span&gt;");
$("#minutes").html(minutes + "&lt;span&gt;Minutes&lt;/span&gt;");
$("#seconds").html(seconds + "&lt;span&gt;Seconds&lt;/span&gt;");
}

getStoreHours();

</script>

Stoping At Zero

Another question was getting the timer to stop once the clock got to the desired date instead of displaying negative numbers. To do this, replace the javascript code with the javascript code below. Make sure to replace "var endTime = new Date("March 5, 2018 12:00:00 EST");" with your desired date.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>

function makeTimer() {

var endTime = new Date("March 5, 2018 12:00:00 EST");
var endTime = (Date.parse(endTime)) / 1000;

var now = new Date();
var now = (Date.parse(now) / 1000);

var timeLeft = endTime - now;

var days = Math.floor(timeLeft / 86400); 
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

// Stop the timer when the desired time/date has been reached.
if (timeLeft &lt; 0) {
    days = hours = minutes = seconds = 0;
    clearInterval(countdown);
}

if (hours &lt; "10") { hours = "0" + hours; }
if (minutes &lt; "10") { minutes = "0" + minutes; }
if (seconds &lt; "10") { seconds = "0" + seconds; }

$("#days").html(days + "&lt;span&gt;Days&lt;/span&gt;");
$("#hours").html(hours + "&lt;span&gt;Hours&lt;/span&gt;");
$("#minutes").html(minutes + "&lt;span&gt;Minutes&lt;/span&gt;");
$("#seconds").html(seconds + "&lt;span&gt;Seconds&lt;/span&gt;");
}

// Save the interval to a variable to to reference later when desired date has been met.
var countdown = setInterval(function() { makeTimer(); }, 1000);

</script>