Relative Time Formatter

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Relative time displays like '5 minutes ago' or '2 hours ago' make interfaces feel more human. In this challenge, you will build a Relative Time Formatter that converts timestamps into friendly relative strings.

Users enter an ISO date/time, click format, and see the relative time output. Support: 'just now', 'X minutes ago', 'X hours ago', 'X days ago'.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Input field with ID #input-timestamp must accept valid ISO date/time strings.
Clicking button #btn-format converts it relative to current clock time.
Display the output string inside an element with ID #time-output.
The calculator must support basic standard boundaries: "just now" (for < 60s elapsed), "minutes ago", "hours ago", and "days ago".

Example Demo

User Flow

Step-by-step Flow Explanation:

User loads the page: The relative time formatter renders datetime input and formatting button.
Select date/time: User inputs or selects a valid timestamp (e.g., a time 5 minutes in the past) using the #input-timestamp field.
Format action: User clicks the #btn-format button.
Text output: The system calculates the elapsed interval and updates #time-output text content with a friendly string (e.g., "5 minutes ago").
Verification: The automated test assertions verify element existence and check output boundaries for correct date difference computations.

Related UI Challenges

Component UI

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#input-timestamp, #btn-format, #time-output)	Pending	Pending execution
Formatting with standard time generates relative description	Pending	Pending execution