DEV Community

Discussion on: Countdown Timer using HTML, CSS, and Javascript

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

Ideally we should keep the logic for the difference between the dates and the logic to show that separated, to make it more reusable. So you could have something like this:

/** @param {number|string|Date} [date2] */
export const dateDiff =
    (date2 = new Date()) =>
    /** @param {number|string|Date} [date1] */
    (date1 = new Date()) =>
        (diff => ({
            years: diff.getUTCFullYear(),
            months: diff.getUTCMonth(),
            days: diff.getUTCDate() - 1,
            hours: diff.getUTCHours(),
            minutes: diff.getUTCMinutes(),
            seconds: diff.getUTCSeconds(),
            milliseconds: diff.getUTCMilliseconds()
        }))(
            new Date(
                Math.abs(
                    new Date(date2).getTime() - new Date(date1).getTime()
                ) - 621672192e5
            )
        );
Enter fullscreen mode Exit fullscreen mode

That function then can be used from anywhere to get the absolute difference between two dates, so then you can do something like this (I used textContent instead of innerHTML which is safer):

import { dateDiff } from "./dateDiff.js";

const diffWithOffer = dateDiff("30 oct 2021");

setInterval(() => {
    const { days, hours, minutes, seconds } = diffWithOffer();

    document.querySelector("#days_left").textContent = days;
    document.querySelector("#hours_left").textContent = hours;
    document.querySelector("#mins_left").textContent = minutes;
    document.querySelector("#secs_left").textContent = seconds;
}, 1e3);
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
supportic profile image
Supportic

I think you forgot to put in new Date() into diffWithOffer closure function.
diffWithOffer(new Date())

Collapse
lukeshiru profile image
LUKESHIRU

It was intentional. When you do new Date(undefined) it gives you the current date, so if you call the curried function without arguments, is calculates based on the current date ☺️

Thread Thread
supportic profile image
Supportic

When I called the function without parameters date1 was undefined and it returned undefined o.o

Thread Thread
lukeshiru profile image
LUKESHIRU • Edited on

You're right, wth?! JavaScript being JavaScript I guess ... if you do new Date() it gives you the current date, but if you do new Date(undefined) which should be the same, it returns an Invalid Date .... gosh ... I'll update the original code! ... thanks for debugging it!

Thread Thread
supportic profile image
Supportic • Edited on

No worries new Date(undefined) always throws 'Invalid Date' in the console and new Date(null) returns the starting point.
Thanks for the neat snippet though.
Could you also explain why we subtract 621672192e5 ?

Thread Thread
lukeshiru profile image
LUKESHIRU

Sure, that 621672192e5 value is 0000-01-01T00:00:00.000Z, so the "first day" of the Gregorian calendar, if we have two dates and we subtract that, we get the "difference" between those two dates ... this is still the "cheap/non-exact" version, if you want something more useful, you might have to update it so it does the actual values for each property. I might do that later so the example is more useful for other folks.