Site URL: https://codepen.io/janoschvg/pen/QwmdwY
Hi,
I've added code from codepen into my Squarespace site using a code block. The code is for a countdown timer but it doesn't countdown after I insert it.
Code i've inserted and edited
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
<header></header>
<section>
<div class="wrapper">
<hgroup>
<h1>Countdown</h1>
<p class="meta">WE ARE GOING LIVE IN</p>
</hgroup>
<div id="countdown">
<div class="cd-box">
<p class="numbers days">00</p><br>
<p class="strings timeRefDays">Days</p>
</div>
<div class="cd-box">
<p class="numbers hours">00</p><br>
<p class="strings timeRefHours">Hours</p>
</div>
<div class="cd-box">
<p class="numbers minutes">00</p><br>
<p class="strings timeRefMinutes">Minutes</p>
</div>
<div class="cd-box">
<p class="numbers seconds">00</p><br>
<p class="strings timeRefSeconds">Seconds</p>
</div>
</div>
<!-- end div#countdown -->
</div>
<!-- end div.wrapper -->
</section>
<style>
/* resets and general styles */
*{
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection{
color: #FFFFFF;
background: #FF5722;
}
::selection{
color: #FFFFFF;
background: #FF5722;
}
body{
font: normal 16px 'Roboto', sans-serif;
position: absolute;
height: 100%;
width: 100%;
}
div.wrapper{
width: calc(4*225px);
margin: 0 auto;
}
span, a, strong{font-weight: 700;}
a{transition: .2s; text-decoration: none; color: #787878; border-bottom: 1px solid #607D8B;}
a:hover{transition: .2s; color: #FF5722;}
/* page layout */
/* header */
header{
width: 100%;
height: 50%;
background: #FF5722;
}
/* section */
section{
width: 100%;
height: 50%;
}
section h1, section p.meta{
color: #FFFFFF;
margin-bottom: 15px;
}
section hgroup{margin-top: -360px;}
section p.numbers{font-size: 6em;}
section p.meta,section p.strings{font-size: 1.5em;}
section h1{font-size: 4.5em;}
/* countdown styles */
div#countdown{color: #353535;}
div#countdown p{
width: 100%;
display: inline-block;
text-align: center;
}
p.numbers{
width: 100%;
height: 85%;
background: #FFFFFF;
margin-top: -25px;
padding-top: 100px;
}
p.strings{
width: 100%;
height: auto;
padding: 30px 0;
background: #FF5722;
color: #FFFFFF;
}
div.cd-box{
width: 210px;
height: 360px;
background: #FFFFFF;
float: left;
padding: 25px 0 0 0;
margin: 30px 15px 0 0;
-webkit-box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
-moz-box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
box-shadow: 5px 6px 9px 1px rgba(53, 53, 53, 0.5);
}
/* footer */
footer{
position: relative;
top: 60px;
}
footer p{
color: #787878;
}
</style>
<script>
$(document).ready(function(){
//
(function(e){
e.fn.countdown = function (t, n){
function i(){
eventDate = Date.parse(r.date) / 1e3;
currentDate = Math.floor(e.now() / 1e3);
//
if(eventDate <= currentDate){
n.call(this);
clearInterval(interval)
}
//
seconds = eventDate - currentDate;
days = Math.floor(seconds / 86400);
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds / 3600);
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
//
days == 1 ? thisEl.find(".timeRefDays").text("Days") : thisEl.find(".timeRefDays").text("Days");
hours == 1 ? thisEl.find(".timeRefHours").text("Hours") : thisEl.find(".timeRefHours").text("Hours");
minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");
seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : thisEl.find(".timeRefSeconds").text("Seconds");
//
if(r["format"] == "on"){
days = String(days).length >= 2 ? days : "0" + days;
hours = String(hours).length >= 2 ? hours : "0" + hours;
minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
}
//
if(!isNaN(eventDate)){
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds)
}
else{
errorMessage = "Invalid date. Example: 27 March 2015 17:00:00";
alert(errorMessage);
console.log(errorMessage);
clearInterval(interval)
}
}
//
var thisEl = e(this);
var r = {
date: null,
format: null
};
//
t && e.extend(r, t);
i();
interval = setInterval(i, 1e3)
}
})(jQuery);
//
$(document).ready(function(){
function e(){
var e = new Date;
e.setDate(e.getDate() + 60);
dd = e.getDate();
mm = e.getMonth() + 1;
y = e.getFullYear();
futureFormattedDate = mm + "/" + dd + "/" + y;
return futureFormattedDate
}
//
$("#countdown").countdown({
date: "19 April 2021 18:30:00", // change date/time here - do not change the format!
format: "on"
});
});
});
</script>
Can anyone figure out what i'm doing wrong?
I added the html, css (inside <style> </style> and the JS inside <script> </script>
This is what displays.
I have disabled Ajax Loading already
It also doesn't adapt to changing screen size (on different devices). Do I need to find code for that too?
Thanks