Technical Implementation

1. Event-Driven Architecture

The application uses a strictly event-driven model to minimize CPU usage. Updates are triggered only when the user interacts with the application.

• Text Inputs: Uses oninput for real-time math recalculation as you type.
• Checkboxes: Uses onchange to trigger immediate proportional splits.
• Dynamic Elements: When new rows or columns are added, event listeners are attached programmatically to the fresh DOM elements.

2. Manual URL Optimization

To keep URLs short enough for messaging apps (which often have a 2,000-character limit), we use a multi-step optimization process:

• Bitmasking: Instead of storing checkbox states as a long list of true/false values, we convert them into a single integer. For example, [true, false, true] becomes binary 101, which is stored simply as 5.
• Structural Flattening: Redundant JSON keys (like "name": and "cost":) are removed. Items are stored as flat arrays: ["Pizza", 12.50, 7].
• Base64 Encoding: The resulting minified JSON is encoded into a URL-safe Base64 string. This bypasses the need for percent-encoding special characters, further reducing the string length.

3. Proportional Cost Logic

The splitting algorithm ensures that taxes and tips are shared fairly:

1. Subtotal: Sums all base item costs.
2. Global Modifiers: Applies the "Adder" (tax) and "Multiplier" (tip).
3. Proportional Split: Each person's share of the tax and tip is calculated based on the ratio of their individual subtotal to the grand subtotal. This ensures that someone who ordered a $5 salad doesn't pay as much tax as someone who ordered a $50 steak.

4. Cache Management

To ensure users always receive the latest feature updates and bug fixes, the application uses a versioned query string for its JavaScript inclusion (e.g., script.js?v=7). This forces the browser to bypass its local cache and fetch the newest logic.

Project Credits