Pregnancy Due Date Calculator and Weekly Timeline

A professional, highly responsive, and user-friendly web application designed to help expectant parents estimate their due date and understand their pregnancy journey through a week-by-week timeline.

Core Features

• LMP-Based Calculation: Input the first day of the last menstrual period to calculate the estimated due date and current gestational age.
• Dynamic Progress Visualization: A visual progress bar showing the user’s current position within the three trimesters.
• Interactive Timeline: An auto-generated week-by-week breakdown showing key developmental milestones for the fetus and common symptoms for the parent.
• Conception Window Estimation: Calculates the most likely window for conception.
• Print-Friendly View: CSS media queries to ensure the timeline generates a clean, readable printout for doctor visits.

UI/UX Layout

• Header: Clean, centered title with a welcoming subtitle. No navigation bars.
• Main Tool Area:
  • A modern input form with large, touch-friendly date pickers.
  • "Calculate" button with a smooth hover transition.
• Results Area:
  • Hero card displaying the estimated due date in bold, large typography.
  • Secondary section displaying "Current Week of Pregnancy" and "Days Remaining".
• Timeline Section: A vertical, stepped interface (using flexbox) showing weeks 1 through 40.

Design System & Aesthetics

• Color Palette:
  • Primary: Soft Sage Green (#8FBC8F) for UI elements.
  • Secondary: Clean Slate Blue (#F0F8FF) for backgrounds.
  • Typography: Dark Grey (#333333) for high readability.
  • Accent: Soft Coral (#FF8C69) for milestones and key dates.
• Design Rules:
  • Strictly light mode. Use high-quality box shadows (0 4px 6px rgba(0,0,0,0.1)) to lift cards off the background.
  • Smooth CSS transitions on all button clicks and panel expansions (300ms ease).
  • Mobile-first approach: Ensure inputs are large enough for mobile usage without zoom.

Technical Directives

• Architecture: Single-file HTML/CSS/JS. All logic must be contained in a single <script> block.
• External Assets: Use Tailwind CSS via CDN for styling. Use Google Fonts (e.g., Inter or Lato) for typography.
• Constraint Compliance:
  • No Storage: Use pure JavaScript variables for state management. Absolutely no localStorage, sessionStorage, or cookies.
  • No Popups: Do not use alert(), confirm(), or prompt(). If validation fails (e.g., invalid date), show a custom-styled <div> error message within the DOM.
  • Sandboxing: Ensure the app is fully functional inside a null-origin iframe by avoiding prohibited API calls.
  • Performance: Minimize DOM reflows; calculate the entire timeline once on trigger and update the innerHTML efficiently.