Online Bill Splitter with Tax and Tip Percentage Calculator

Technical Specification: Comprehensive Bill Splitter and Expense Calculator

Overview

A client-side, browser-based web application designed to simplify the complex math involved in restaurant bills, group travel costs, or shared expenses. It performs real-time calculations for tax, tips, and individual share division without requiring server-side storage or user accounts.

Design System & Aesthetics

• Layout: A clean, single-page interface with a mobile-first approach. Cards represent different sections (Base Bill, Tax/Tip, Results).
• Color Palette: Professional, high-contrast UI using a grayscale background, crisp white input fields, and a distinct primary accent color (e.g., #007bff for primary actions, #28a745 for success states).
• Animations: Use CSS transitions to animate result updates; numbers should "count up" or fade in when changed to provide visual feedback.

Core Features

1. Dynamic Input Fields:
   • Total Bill Amount: High-precision float input.
   • Tax Input: Toggle between fixed amount or percentage of the bill.
   • Tip Selector: Quick-select buttons (15%, 18%, 20%, 25%) and a custom input field.
   • Participants Slider: Visual slider to quickly adjust from 1 to 50 people.
2. Advanced Splitting Modes:
   • Equal Split: Simple division of the total (post-tax and tip).
   • Custom Itemization: A list view where users can add multiple items, assign them to specific individuals, and auto-calculate their share of the shared tax and tip proportionally.
3. Result Panel:
   • Real-time calculation display: Total Amount, Total Tip, Total Tax, Amount Per Person.
   • Rounding Option: A toggle to round the total bill up or down to the nearest dollar or cents, automatically adjusting the tip amount to maintain the round number.
   • Share Functionality: A "Copy to Clipboard" button that formats the final breakdown into a text message-friendly summary.
4. Local Storage Integration:
   • Automatically save the user’s last input settings (e.g., favorite tip percentage) locally so they don't have to reconfigure on next visit.

Technical Requirements

• Stack: Pure vanilla JavaScript, HTML5, and CSS3/Tailwind CSS for responsive design.
• Performance: All calculations performed on the client-side using Number or BigInt to prevent floating-point precision errors (e.g., ensuring 10.00 / 3 doesn't result in infinite decimals).
• Accessibility: Full keyboard navigation, ARIA labels for all inputs, and high-contrast text to meet WCAG 2.1 AA standards.