Count up timer for days since start date

Design help Custom code
1

Hi. I am trying to make a count up timer. The idea is that I would be able to signify the first day of an event and each day that passes, it would show days since that date. For example:

First day of event is 3/1/24. On that day it would show 1.
Second day of event is 3/2/24. On that day it would show 2 and so on.

I’ve come across a few posts that are similar, but nothing that quite fits what I am looking for. Thank you for the help!

Here is my site Read-Only: [LINK
(how to share your site Read-Only link)

2

hi @wyocowboy2014 as this will require custom code there is many examples on internet like this

const startDay = new Date("2024, 01, 02"); // day of event
const now = new Date(); // current date

// 24 hours, 60 minutes, 60 seconds, 1000 milliseconds
const daysSince = Math.round((now - startDay) / (1000 * 60 * 60 * 24)); // round the amount of days
// result: 34
3

@Stan Thank you! I’ve been reviewing examples like this before I posted, but having trouble linking the result to text on the front end so that it updates after publishing.

4

@Stan Here is what I have

<script>
  function daysSinceSpecificDate(year, month, day) {
      const currentDate = new Date();
      const specificDate = new Date(year, month - 1, day);
      const timeDifference = currentDate - specificDate;
      const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
      return daysDifference;
  }

  // Example: Calculate days since January 1, 2020
  const specificYear = 2020;
  const specificMonth = 1;
  const specificDay = 1;

  const daysSince = daysSinceSpecificDate(specificYear, specificMonth, specificDay);

  // Update an element with the class "daysSinceResult" with the calculated value
  $(document).ready(function() {
      $('.daysSinceResult').text(`Number of days since ${specificMonth}/${specificDay}/${specificYear}: ${daysSince} days`);
  });
</script>

I then select the text that I want to apply this to and make it a span and add the class daysSinceResult. I then publish it but the text doesn’t change to show the days since the date.

5

hi @wyocowboy2014 while I’m not familiar with jQuery syntax (only javaScript) I will presume your code is correct and if is in before body end it should work on live page as JS not work in Designer preview mode.

the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
  • Upload as many screenshots/screencast videos as possible to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this:
6

@Stan Just updated my read only link. FYI I am only working in width 1920 currently as this is being built to fit something specific.

7

hi @wyocowboy2014 I have done 3 years ago some example for someone and is somewhere here on forum. it is slightly different as dates come from CMS and it is countdown but you can check it out how things can be done.

here is link again.

ReadOnly

LivePage

8

@Stan Im obviously still doing something wrong. Can’t even get yours to run.

9

what do you mean my is not running?

10

@Stan Finally got it working. Thank you for your help!

1 Like