Javascript Relative Time 24 Hours Ago Etc As Time Duplicate

When working with timestamps in JavaScript, it's essential to be able to manipulate dates and times effectively. One common requirement is to display relative time, such as "24 hours ago", "yesterday", or similar expressions instead of exact timestamps. This not only enhances user experience but also makes the information more readable and user-friendly.

To achieve this functionality, we can use a combination of JavaScript's built-in Date object and simple calculations. Let's take a closer look at how we can display relative time such as "24 hours ago" in JavaScript.

First, we need to get the current date and time using the Date object:

const currentDate = new Date();
const currentTimestamp = currentDate.getTime();

To display a relative time like "24 hours ago", we need to calculate the time difference between the current time and the time we want to display:

const targetTimestamp = currentTimestamp - (24 * 60 * 60 * 1000); // Subtracting 24 hours in milliseconds

Next, we can create a function that will convert this time difference into a human-readable relative time format:

function calculateRelativeTime(targetTimestamp) {
    const timeDiff = currentTimestamp - targetTimestamp;
    if (timeDiff < 60 * 1000) {
        return 'just now';
    } else if (timeDiff  1 ? 's' : ''} ago`;
    } else if (timeDiff  1 ? 's' : ''} ago`;
    } else {
        // Handle other cases like days, weeks, months, etc.
    }
}

You can customize the function further to display different time ranges based on your requirements. For example, you could extend it to handle days, weeks, or months as well.

Finally, you can call this function with the target timestamp to get the relative time string:

const relativeTime = calculateRelativeTime(targetTimestamp);
console.log(relativeTime); // Outputs something like '24 hours ago'

By following these simple steps and customizing the logic to suit your needs, you can easily display relative time such as "24 hours ago" in your JavaScript applications. This not only enhances the user experience but also makes your interface more intuitive and engaging.