COUNTDOWN TIMER

The following is simple. If it get’s complicated, you’re not doing it right.
Follow these instructions closely and you’ll have your new plugin working on your site in a few minutes!

THE HTML BIT

Insert a Code Block, on your Squarespace website.

Delete the example HTML, and Paste the following HTML into the code area, and click save.

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

THE CSS BIT

Copy and paste the following CSS code into the Custom CSS area of your site, found under the Design menu. The red highlighted CSS styles the text. You can edit these numbers to your preference. The number beginning with a # sets the font color. Flat UI Color Picker have some great modern color codes you could use.
 

/* COUNTDOWN TIMER CSS */

#timer {
  margin: 0 auto;
  display: table;
  div {
    display: table-cell;
// STYLE NUMBERS
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 500;
    color: #f65959;
  padding: 20px;
    border-radius: 300px;
    text-align: center;
    span {
// STYLES DAYS, HOURS, MINUTES, SECONDS
      letter-spacing: 0px;
      color: #111111;
  font-size: 20px;
      margin-left: -4px;
      margin-top: 16px;
      display: block;
    }
  }
}
@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 */

THE JS BIT

Copy and paste the following code into the header code injection area of your page and click save. If your page is within an index, paste the code into the header code injection area of the Index, not the page.
Change the red highlighted text to a countdown target - it is structured: Month Date, Year Time Time-Zone. The plugin will automatically countdown to the point in time that you set. Currently we've set it to midday on Christmas day in NYC.

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

var endTime = new Date("December 25, 2015 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>