So I decided to use Squarespace to create a website for my wedding and save time, but I didn't realize how limited I was to the code itself and I'm regretting it.
I would like to have a countdown timer replace the "September 17, 2017" at the top. I have the code/script for the timer, but the instructions want me to make a code block, which you can't do in headers on this template.
This is the page: http://www.meetusinthemountains.net/when-where/#details
There is a place to insert any CSS, but it's where to put the HTML and script that's stumping me. There are "code injection areas" for each page, but this didn't seem to work. Sadly I cannot just access my own HTML files unless I upgrade to the business plan or whatever.
Any way to get it in there? Here is the timer code:
<div id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
/* 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;
}
}
}
}
<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>