Blueprint: Interactive Calculator
Relevant source files
The following files were used as context for generating this wiki page:
The Interactive Calculator is a functional application module designed to be built using "vibe coding" methodologies, where a developer describes requirements in natural language to an AI assistant. It serves as a practical implementation example within the larger starter project, demonstrating how to transform simple user prompts into a working web-based utility.
The primary scope of this module includes handling mathematical inputs, calculating split costs (specifically for tips and bills), and providing immediate UI feedback. It is designed to replace the initial index.html landing page once generated by Claude.
Sources: PROMPTS.md:21-23, index.html:20-22, README.md:46-50
Functional Architecture
The calculator follows a reactive design pattern where user inputs trigger immediate updates to the displayed results. The architecture focuses on accessibility (large tap targets) and dynamic state management.
Component Breakdown
The system is composed of several key functional components defined through iterative prompts:
| Component | Description | Logic Requirements |
|---|---|---|
| Bill Input | Numerical field for the total cost. | Real-time value capturing. |
| Tip Selector | Pre-defined percentage buttons (15/18/20/25). | Optional custom percentage input support. |
| Split Logic | Input for the number of participants. | Division of total by participant count. |
| Display Panel | Visual output for tip, total, and per-person amounts. | Immediate refresh upon input change. |
Sources: PROMPTS.md:25-33
Data Flow and Calculation Logic
The logic flow follows a linear progression from user input to final output display, often incorporating advanced rounding features during iterative development.
The diagram shows the logic flow from user input through calculation and optional rounding logic to final display.
Sources: PROMPTS.md:25-33
Technical Implementation Workflow
The implementation relies on the interaction between the developer's terminal environment and the AI agent (Claude).
Development Loop
The project utilizes a specific "Describe-Look-Refine" loop. The process starts by configuring the environment with an API key and launching the AI tool via the terminal.
The sequence diagram illustrates the lifecycle of building the calculator from terminal setup to iterative refinement.
Sources: README.md:16-41, index.html:18-21
Key Commands and Environment
The calculator is hosted in a web-based environment defined by devcontainer.json.
- API Configuration: The environment must be authenticated using
export ANTHROPIC_API_KEY. - Execution: The command
claudestarts the interactive builder. - Serving: The command
serve .is used to host the calculator in a live preview tab.
Sources: README.md:46-56, .devcontainer/devcontainer.json
Iterative Features
The calculator is designed to evolve from a basic splitter to a more complex tool through specific "Iterate" prompts.
- Customization: Transitioning from fixed percentage buttons to custom input fields.
- Advanced Logic: Implementing a "round up to nearest dollar" feature.
- Real-time Interaction: Ensuring the
index.htmlupdates the instant any input is changed without manual refresh.
Sources: PROMPTS.md:31-33, README.md:39-41
Summary
The Interactive Calculator serves as a core demonstration of the project's capability to bridge natural language prompts and functional code. By utilizing the terminal-based Claude interface and a reactive development loop, users can create, serve, and refine a utility that handles data input, mathematical processing, and dynamic UI updates in real-time.