JavaScript: Calculate Duration Since

Hope you're well. 🎩

I find YouTube's date-trimming on video thumbnails rather amusing.

I did it back then with my close-enough vibe. But recently, when I compared it to actual YouTube frontend, hm... 🤔 That's different. Nifty, that.

---

Analysis

As I've observed, the pattern goes like this:

• 0 day = 0 day.
• 1 day = 1 day.
• 2 days = 2 days.
• ...
• 6 days = 1 week.
• 7 days = 1 week.
• 8 days = 1 week.
• 9 days = 1 week.
• ...
• 12 days = 2 weeks.
• 13 days = 2 weeks.
• 14 days = 2 weeks.
• ...
• 1 month, 2 weeks, X days = 2 months.

⬆️ See the pattern?

The trimming logic goes as such:

Let: Y = years M = months W = weeks D = days and M_max = 12 (months per year) W_max = 4 (weeks per month, approximated) D_max = 7 (days per week) Then the rounding rule: if D ≥ ½·D_max ➡️ W = W + 1, D = 0 if W ≥ ½·W_max ➡️ M = M + 1, W = 0 if M ≥ ½·M_max ➡️ Y = Y + 1, M = 0 Hence the result is: ceil(Y, M, W, D) ⬆️ Increment the larger unit whenever the smaller reaches or exceeds half its span. --- Example: D = 4 ➡️ W = 1 (because 4 ≥ 3.5) W = 3 ➡️ M = 1 (because 3 ≥ 2) M = 7 ➡️ Y = 1 (because 7 ≥ 6)

In one sentence:

Largest unit plus half or more of the next lower unit equals one full increment of the largest unit.

Or...

Once the little bit's halfway there or more, give the big lad a bump and forget the small one ever happened.

🤔

Well, that. Is called street mathematics. We have Street Hawk, the heat-seeking laser put on modified Honda-Yamaha and this.

---

DEMONSTRATION

Information about the application below:

• The YEAR-MONTH-DATE inputs are automatically filled with today's date. You may change each one to get different result.
• Hit Enter (or Return) or the button ▶️ CALCULATE to calculate the difference.
• Tick the ✅ SIMPLE to get the simplified (rounded) output. Untick it to get the detailed result.
• Hit 🔄️ RESET to empty the output and fill the inputs with current date.

⬇️ Ready when you are.

---

Greetings, I'm a demonstration. Please try me.

➡️ YEAR

➡️ MONTH

➡️ DATE

SIMPLE    

---

⬆️ Updated the logic. 🧐

---

MAIN FUNCTION

This is the function. You may evaluate and use this.

Pardon for the lack of semicolons.

To get simplified output, call it like so:

calculateDurationSince("1990-10-9", true);

To get detailed output, call it like so:

calculateDurationSince("1990-10-9");

---

CSS: Resizing and Colorising Checkbox

This element:

We can do this:

.checkbox { /* Adjust as needed */ /* Dimensions and vertical alignment */ width: 30px; height: 30px; vertical-align: middle; /* Colorise */ accent-color: green; /* ⬆️ First launched in late summer/early autumn of 2021. */ }

---

🙋‍♂️

Did you know "arvo" means "afternoon"? Oh, kiwis. You might think the anteater? It's aardvark.

It was pure early colonial Dutch (what became Afrikaans). Aard = earth (the soil), vark = pig, "earth pig". Fascinating, aye? Aardvarken.

Or not. 🤷‍♂️

See ya this arvo, Arvo the aardvark with an Afro.

She sells sea aardvark in the arvo.

Cheers. 🎩