Build an Age in Hours Calculator ⏳
We usually measure life in years. But computers measure life in milliseconds (Unix Epoch). This makes it incredibly easy to calculate your age in hours, minutes, or even seconds. The fun part? Making it tick in real-time.
Step 1: The Math (Time Deltas) 🧮
JavaScript Dates are just numbers (milliseconds since 1970).
1. Get Difference in ms:
Diff = Now - BirthDate (e.g., 500,000,000,000 ms)
2. Convert to Hours:
Hours = Math.floor(Diff / (1000 * 60 * 60))
3. Convert to Seconds:
Seconds = Math.floor(Diff / 1000)
Step 2: The "Live Ticker" Hook ⏱️
Static numbers are boring.
We want the user to watch their life ticking away!
We use useEffect with setInterval to force a re-render every second.
/* hooks/use-ticker.js */
import { useState, useEffect } from "react";
export function useTicker() {
const [tick, setTick] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setTick(n => n + 1); // Force update
}, 1000);
return () => clearInterval(timer);
}, []);
return tick;
}
Step 3: The React Component 🎂
Here is a component that shows your age in "Hours" as a massive headline number.
"use client"
import { useState, useEffect } from "react"
import { Clock } from "lucide-react"
export default function AgeInHours() {
const [birth, setBirth] = useState("")
const [hours, setHours] = useState<number | null>(null)
// Ticker to update results alive
useEffect(() => {
if(!birth) return;
const interval = setInterval(() => {
const b = new Date(birth)
const now = new Date()
const diffMs = now.getTime() - b.getTime()
// Calculate Total Hours
setHours(Math.floor(diffMs / (1000 * 60 * 60)))
}, 1000)
return () => clearInterval(interval)
}, [birth])
return (
<div className="max-w-md mx-auto p-8 bg-slate-900 text-slate-100 rounded-3xl shadow-2xl border border-slate-800 text-center">
<h2 className="text-xl font-bold mb-6 flex items-center justify-center gap-2 text-cyan-400">
<Clock /> Age in Hours
</h2>
<div className="mb-8">
<label className="text-xs text-slate-500 uppercase font-bold mb-2 block">Enter Date of Birth</label>
<input
type="datetime-local"
value={birth} onChange={e => setBirth(e.target.value)}
className="w-full p-3 rounded-lg bg-slate-800 border border-slate-700 text-white focus:ring-2 focus:ring-cyan-500 outline-none"
/>
</div>
{hours !== null ? (
<div className="animate-in fade-in zoom-in duration-500">
<div className="text-xs text-slate-400 uppercase tracking-widest mb-2">You have been alive for</div>
<div className="text-6xl font-black text-white tabular-nums tracking-tighter shadow-cyan-500/50 drop-shadow-lg">
{hours.toLocaleString()}
</div>
<div className="text-xl font-bold text-cyan-400 mt-1">HOURS</div>
<div className="mt-8 text-xs text-slate-500 border-t border-slate-800 pt-4">
That's {(hours / 24).toFixed(0)} days of experience!
</div>
</div>
) : (
<div className="text-slate-600 italic py-8">
Waiting for date...
</div>
)}
</div>
)
}
Step 4: Timezones Matter 🌍
In the example above, datetime-local input uses the user's local browser time.
However, new Date(string) might interpret "2023-01-01" as UTC depending on formatting.
Best Practice: Always use explicit Date inputs (like datetime-local) which capture the local time clearly, or use a library like date-fns-tz if you need to respect specific timezones for exact birth moments.