How do I add this countdown timer to my site? (Personal Plan)

Is there any way to add this codepen.io countdown timer to my website? I have the personal plan. I tried copying the code into a code block with the "CSS" option but that didn't seem to work. 

5 hours ago, imdanielduncan said:

Is there any way to add this codepen.io countdown timer to my website? I have the personal plan. I tried copying the code into a code block with the "CSS" option but that didn't seem to work. 

I don't think you can since you can't add custom code, but this site works with the personal plan and an embed block.

https://www.tickcounter.com

There's also this site but I haven't tested it yet.

https://logwork.com/countdown-timer

Edit Page where you want to use Countdown > Add a Code Block with this code

<div class="countdown-timer">
  <div class="days">0</div>
  <div class="hours">0</div>
  <div class="minutes">0</div>
  <div class="seconds">0</div>
</div>
<style>
  .countdown-timer {
  padding: 1rem;
  font-size: 1.5rem;
}

.countdown-timer > div {
  display: inline-block;
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
}

.countdown-timer > div:after {
  color: #A4A4A4;
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
}

.countdown-timer > .days:after {
  content: 'days';
}

.countdown-timer > .hours:after {
  content: 'hours';
}

.countdown-timer > .minutes:after {
  content: 'minutes';
}

.countdown-timer > .seconds:after {
  content: 'seconds';
}
</style>

Add a Markdown Block under Code Block with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  let nextMonth = new Date(new Date().getFullYear(),
                         (new Date().getMonth() + 1) % 12);

if (nextMonth.getMonth() == 0) {
  nextMonth.setFullYear(nextMonth.getFullYear() + 1);
}

let nextMonthString = nextMonth.toISOString();
window.setInterval(() => {
  const timeRemaining = getTimeRemaining(nextMonth);
  $('.days').text(('0' + timeRemaining.days).slice(-2));
  $('.hours').text(('0' + timeRemaining.hours).slice(-2));
  $('.minutes').text(('0' + timeRemaining.minutes).slice(-2));
  $('.seconds').text(('0' + timeRemaining.seconds).slice(-2));
}, 1000);

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
</script>

Hi, 

is there a way to center the counter digits to the labels (day, hours, ...)?
Thank you!

Best, Stefan

PS: Found the solution: 
"text-align: center;"

On 7/17/2023 at 9:00 PM, StefanMax said:

Hi, 

is there a way to center the counter digits to the labels (day, hours, ...)?
Thank you!

Best, Stefan

 

PS: Found the solution: 
"text-align: center;"

Did you solve or still need help?

On 12/21/2022 at 9:42 AM, tuanphan said:

Edit Page where you want to use Countdown > Add a Code Block with this code

<div class="countdown-timer">
  <div class="days">0</div>
  <div class="hours">0</div>
  <div class="minutes">0</div>
  <div class="seconds">0</div>
</div>
<style>
  .countdown-timer {
  padding: 1rem;
  font-size: 1.5rem;
}

.countdown-timer > div {
  display: inline-block;
  padding-right: 0.5rem;
  margin-right: 0.5rem;
  font-size: 2rem;
  font-weight: bold;
}

.countdown-timer > div:after {
  color: #A4A4A4;
  display: block;
  font-size: 0.75rem;
  font-weight: normal;
}

.countdown-timer > .days:after {
  content: 'days';
}

.countdown-timer > .hours:after {
  content: 'hours';
}

.countdown-timer > .minutes:after {
  content: 'minutes';
}

.countdown-timer > .seconds:after {
  content: 'seconds';
}
</style>

Add a Markdown Block under Code Block with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  let nextMonth = new Date(new Date().getFullYear(),
                         (new Date().getMonth() + 1) % 12);

if (nextMonth.getMonth() == 0) {
  nextMonth.setFullYear(nextMonth.getFullYear() + 1);
}

let nextMonthString = nextMonth.toISOString();
window.setInterval(() => {
  const timeRemaining = getTimeRemaining(nextMonth);
  $('.days').text(('0' + timeRemaining.days).slice(-2));
  $('.hours').text(('0' + timeRemaining.hours).slice(-2));
  $('.minutes').text(('0' + timeRemaining.minutes).slice(-2));
  $('.seconds').text(('0' + timeRemaining.seconds).slice(-2));
}, 1000);

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
</script>

 

Thank you for this amazing countdown timer, Tuan! How can I change the duration though?

Hi @tuanphan, when I add that code it just puts 4 "0"s with "days hours" etc underneath them. How do you set duration and make it countdown? 

Thank you

On 9/13/2023 at 6:16 PM, gdmartino said:

Hi @tuanphan, when I add that code it just puts 4 "0"s with "days hours" etc underneath them. How do you set duration and make it countdown? 

Thank you

Have you added script code yet? Can you share link to page where you added the code?

Hi @tuanphan,

I have added the script code, but not sure where to edit the duration of the countdown?
I need it to end at 11 November 2023 at 15:15PM,
This is the link of the website https://faniahafizhwedding.squarespace.com/
Currently it is still in trial mode

Thank you!

On 10/13/2023 at 8:40 AM, cacak said:

Hi @tuanphan,

I have added the script code, but not sure where to edit the duration of the countdown?
I need it to end at 11 November 2023 at 15:15PM,
This is the link of the website https://faniahafizhwedding.squarespace.com/
Currently it is still in trial mode

Thank you!

What is password?

Hi @tuanphan thank you so much for the code! It's so helpful. I'm just having a problem with my set numbers sticking. It seems to keep glitching to 10 days, when I have put 7 in the code. The other numbers are also resetting to values that I did not set.

Here's the link: https://www.chloearielle.com/your-magic-social-brand-bundle 

I'll keep fiddling with it, but any help would be amazing!

Thank you!!

On 11/20/2023 at 9:56 PM, chloearielle said:

Hi @tuanphan thank you so much for the code! It's so helpful. I'm just having a problem with my set numbers sticking. It seems to keep glitching to 10 days, when I have put 7 in the code. The other numbers are also resetting to values that I did not set.

Here's the link: https://www.chloearielle.com/your-magic-social-brand-bundle 

I'll keep fiddling with it, but any help would be amazing!

Thank you!!

What is countdown on the page? I looked whole page & can't find it

@tuanphan Would there be a way to add just the day countdown portion of this to a scrolling marquee section on a site? Thanks so much!

On 4/14/2024 at 3:44 AM, SadieStGermain said:

@tuanphan Would there be a way to add just the day countdown portion of this to a scrolling marquee section on a site? Thanks so much!

You mean add it above scrolling block, or make countdown to scroll?

@tuanphan Making a day countdown scroll across the screen. I'm using placeholder text for now but like this: 

On 4/16/2024 at 7:38 PM, SadieStGermain said:

@tuanphan Making a day countdown scroll across the screen. I'm using placeholder text for now but like this: 

Can you share link to page where you added countdown, I will test some code to make it fullwidth of screen

4 hours ago, tuanphan said:

Can you share link to page where you added countdown, I will test some code to make it fullwidth of screen

Hi @tuanphan. Right now I don't have any countdown added. This is fake placeholder of what I want to create. A day countdown scrolling across the screen. Is this possible? Would you still like a link? I've attached a screen recording of what I'd like to create.

Screen Recording 2024-04-18 at 9.26.06 AM.mov

Yes. It is possible. Do you use Personal or Business Plan? I will try testing some code

On 4/18/2024 at 8:27 PM, SadieStGermain said:

Hi @tuanphan. Right now I don't have any countdown added. This is fake placeholder of what I want to create. A day countdown scrolling across the screen. Is this possible? Would you still like a link? I've attached a screen recording of what I'd like to create.

Screen Recording 2024-04-18 at 9.26.06 AM.mov 3.8 MB · 2 downloads

On 4/20/2024 at 5:19 AM, tuanphan said:

Yes. It is possible. Do you use Personal or Business Plan? I will try testing some code

 

Amazing! Here is this link: https://accordion-grape-5jmn.squarespace.com/config/ PW: Sadie&Kevin2025

On 4/22/2024 at 10:10 PM, SadieStGermain said:

Amazing! Here is this link: https://accordion-grape-5jmn.squarespace.com/config/ PW: Sadie&Kevin2025

Do/will you use Personal or Business or Commerce Plan?

4 hours ago, tuanphan said:

Do/will you use Personal or Business or Commerce Plan?

It's a business plan!