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.

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