Business Days Calculator Technical Specification

Overview

A clean, professional, and high-performance utility designed to help project managers, HR professionals, and students calculate the exact number of working days between two dates.

Functional Requirements

• Date Selection: Use native <input type="date"> for mobile-friendly date selection.
• Business Logic:
  • Calculate difference between Start and End dates.
  • Automatically subtract Saturdays and Sundays.
  • Implement a "Custom Holiday" list manager: Users can add specific dates to be treated as non-working days.
  • Include/Exclude toggle for start and end dates.
• Real-time Updates: Calculation must update instantly when any input changes.
• Responsive Design: Stacked layout for mobile, side-by-side for desktop devices.

UI Design & Aesthetics

• Color Palette:
  • Background: #F8FAFC (Cool Gray 50)
  • Cards: #FFFFFF with drop shadow 0 4px 6px -1px rgb(0 0 0 / 0.1)
  • Primary Buttons: #2563EB (Blue 600)
  • Text Colors: #1E293B (Heading), #475569 (Body)
• Animations:
  • Use transition: all 0.2s ease-in-out for hover states on buttons and inputs.
  • Smooth fade-in for result numbers when the calculation updates.

Developer Guidelines (Strictly Follow)

• Single File: All HTML, CSS, and JS must reside in one file. Use CDN links for any necessary external icons (e.g., Lucide or FontAwesome).
• Sandbox Safety:
  • NO localStorage or sessionStorage: Do not attempt to save any state to the browser.
  • NO Popups: Do not use alert(), confirm(), or prompt(). Create a custom Modal div for user messages if needed.
• Responsiveness: Ensure the date picker inputs are large enough to be easily tapped on mobile devices.
• Performance: Use efficient event listeners (input events instead of change for real-time responsiveness). Ensure the date arithmetic library (if any) or vanilla JS logic handles edge cases (e.g., start date > end date) gracefully by displaying an informative notice rather than a broken calculation.
• Accessibility: Ensure high contrast for text and logical tab order for keyboard navigation.