Jump to content

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

Recommended Posts

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

Edited by sayreambrosio
Link to comment

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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?

👋 Michelle John
💕 
Catchafire volunteer 
🖥️ Web & graphic design for churches, nonprofits & small businesses

🔗 brambledesign.co

Bramble Design

Link to comment
  • 3 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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?

image.png.469a4d7da188ebe4eb5b7074c1484cc3.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

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!!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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: 

Screenshot 2024-04-16 at 8.34.41 AM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Edited by SadieStGermain
clarification
Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.