Streaming live at 10am (PST)

Increment number

Hi all!

I’m trying to increment 3 numbers on a website that shall increase each weekday (Monday-Friday).

Number 1: 149
Number 2: 307
Number 3: 1535

Number 1 shall increase by 3 each workday
Number 2 shall increase by 7 each workday
Number 3 shall increase by 34 each workday

Is it possible?

Yes, I made a quick example below. You would need to create the text elements to display the numbers and give them IDs in the Webflow designer, in this case these would be number1, number2, and number3.

Where things get tricky is that public holidays vary from country to country, and locality to locality. So this example just treats Mon - Fri as working days.

It also requires the moment.js library in your Webflow project.

<script>
    const startDate = moment('Mar 13 2020');
    const today = moment();
    let daysDiff = today.diff(startDate, 'days');
    let workingDays = 0;

    while (daysDiff > 0) {
        const result = moment(startDate);
        result.add(daysDiff, 'days');
        const day = moment(result).day();
        if (day !== 6 && day !== 0) {
            workingDays++;
        }
        daysDiff--;
    }

    const initialValues = [149, 307, 1535];

    const increments = [3, 7, 34];

    const elements = [
        document.getElementById('number1'),
        document.getElementById('number2'),
        document.getElementById('number3')
    ];

    elements.forEach((element, i) => {
        let value = initialValues[i];
        for (let x = 0; x < workingDays; x++) {
            value = value + increments[i];
        }
        element.innerText = String(value);
    });
</script>
1 Like

Thank you! It works perfectly!
I added moments.js inside the head:
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>

Great glad it worked.

Guess you found the start date I set in the script? You can change this of course.