How stefavag88/react-calculator works
This is a browser-based React calculator with a currency-conversion panel. The user enters numbers and operators on the keypad; Calculator owns the expression and screen state, requests evaluation when needed, and displays the result. The top-bar control toggles conversion, which fetches rates on demand and converts the current screen value. The README documents only Create React App setup; the workflow comes from sampled source, while the rate endpoint configuration is represented by its existing constants module.
Main entry points: Calculator/index.js Calculator state · CurrencyConverter/index.js Currency converter · Control/index.js Control button · KeyPad/index.js Keypad
Components 15
Calculator UI
- React entry
src/index.js - Calculator state
src/components/Calculator/index.js - Error boundary
src/components/ErrorBoundary/index.js - Top bar
src/components/TopBar/index.js - Keypad
src/components/KeyPad/index.js - Number button
src/components/buttons/Number/index.js - Operator button
src/components/buttons/Operator/index.js - Control button
src/components/buttons/Control/index.js - Screen
src/components/Screen/index.js
Calculation
- Expression parser
src/common/parser.js - expr-eval
Currency conversion
- Currency converter
src/components/CurrencyConverter/index.js - Rate configuration
src/common/constants.js
Other components
- User
- Exchange-rate API
Connections 21
- User → Number button: enters digits
- User → Operator button: selects operation
- User → Control button: selects control
- React entry → Calculator state: renders
- Calculator state → Error boundary: wraps UI
- Calculator state → Top bar: renders
- Calculator state → Keypad: renders
- Calculator state → Screen: passes state
- Keypad → Number button: renders
- Keypad → Operator button: renders
- Top bar → Control button: renders
- Number button → Calculator state: dispatches input
- Operator button → Calculator state: dispatches action
- Control button → Calculator state: toggles converter
- Screen → Currency converter: passes value
- Calculator state → Expression parser: requests evaluation
- Expression parser → expr-eval: parses expression
- Currency converter → Rate configuration: reads rate config
- Currency converter → Exchange-rate API: fetches rates
- User → Currency converter: chooses target rate
- Currency converter → Control button: renders update control