Free Online Date Duration & Age Calculator

This application is a precision-oriented utility designed to calculate the exact duration between two calendar dates. It provides an immediate, human-readable breakdown of the time elapsed.

Core Features

• Live Calculation Engine: Calculations update instantly as users change date values—no "Submit" button required for every change.
• Comprehensive Breakdown: Outputs results in multiple formats simultaneously:
  • Total years, months, and days.
  • Total weeks and days.
  • Total days, hours, and minutes.
• Smart Controls:
  • "Today" button to quickly set an input to the current date.
  • "Swap" button to switch the start and end dates.
  • "Clear" button to reset inputs.
• Responsive UI: A fluid layout that stacks cards on mobile and aligns them in a grid on desktop.

UI Layout Specification

• Header: Clean, minimalist header with a descriptive title.
• Input Section: Two clean, accessible date-picker inputs (Start Date, End Date) placed prominently.
• Action Bar: A row containing "Swap" and "Reset" icons for fast interaction.
• Results Grid: A series of cards (using a soft-shadow aesthetic) displaying the breakdown. Each card shows the unit (e.g., "Total Weeks") and the calculated value in large, prominent typography.
• Educational Footer: A section explaining how the leap year and calendar math works (no actual footer tag, just a layout block).

Design & Aesthetics

• Color Palette: Use a professional palette: Background #F9FAFB, Primary Blue #2563EB (for buttons/active states), Text #1F2937, Secondary Text #6B7280, Borders #E5E7EB.
• Typography: Clean sans-serif system fonts (Inter, system-ui).
• Transitions: Subtle ease-in-out transitions for card appearance and hover states on buttons.

Technical Implementation Directives

• Single File: All HTML, CSS, and Vanilla JS must exist within a single index.html file.
• No Storage: Absolutely no use of localStorage, sessionStorage, or cookies. Use only in-memory JavaScript variables.
• Sandboxed Environment: Ensure code is compatible with a null-origin iframe (no external dependencies that rely on origin-based cookies).
• Library Usage: Use Tailwind CSS via CDN for styling. Use standard Date objects in JavaScript for all calculations.
• Interactivity: Use input event listeners on the date pickers for real-time updates.
• Accessibility: All inputs must have associated <label> elements or aria-label attributes for screen readers.
• Modern Aesthetics: Avoid default browser styling. Use customized shadow-box styles for containers and rounded corners (rounded-lg) for a modern SaaS feel.