M
Mamedul Islam
Guest
Hey Dev community!
I wanted to share a project I recently completedβa fast, responsive, and installable Age & Duration Calculator. My goal was to build a useful utility without relying on any heavy frameworks, focusing on pure JavaScript, modern CSS, and Progressive Web App principles.
One of the coolest features is the live "current time" mode. It uses
Making it a PWA was a key goal to provide a more native, accessible experience. The Service Worker caches all necessary assets on the first visit, allowing the tool to work perfectly offline.
It was a great learning experience in core DOM manipulation, date logic, and PWA fundamentals.
Feedback is welcome! Let me know what you think.
Continue reading...
I wanted to share a project I recently completedβa fast, responsive, and installable Age & Duration Calculator. My goal was to build a useful utility without relying on any heavy frameworks, focusing on pure JavaScript, modern CSS, and Progressive Web App principles.
The Tech Stack
Vanilla JavaScript (ES6+): For performance and to keep the project lightweight.
Tailwind CSS: For rapid, utility-first styling.
PWA: Service Worker for offline caching and a Web App Manifest for installability.
A Feature I Enjoyed Building
One of the coolest features is the live "current time" mode. It uses
setInterval to update the 'To' date every second and recalculates the duration on the fly, creating a real-time running clock effect.
Code:
// Simplified logic for the live timer
timer = setInterval(setCurrentDateTime, 1000);
function setCurrentDateTime() {
// Gets current time, formats it, and updates the input value
// Then calls the main calculateAndDisplay() function
}Why a PWA?
Making it a PWA was a key goal to provide a more native, accessible experience. The Service Worker caches all necessary assets on the first visit, allowing the tool to work perfectly offline.
It was a great learning experience in core DOM manipulation, date logic, and PWA fundamentals.
Live App: https://mamedul.github.io/age-calculator/
GitHub Repo: https://github.com/mamedul/age-calculator
Feedback is welcome! Let me know what you think.
Continue reading...
