I Built a Vanilla JS PWA: My Age & Duration Calculator Project

#javascript #pwa #showdev #webdev

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.

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.

    // 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.