JavaScript Calculator

A fast, accessible calculator built with React, TypeScript, and Vite — no eval(), fully tested.

View Demo »  ·  Report Bug  ·  Request Feature

Table of Contents

1. About The Project
   • Built With
2. Features
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
5. Roadmap
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

This is the freeCodeCamp JavaScript Calculator project, rebuilt on a modern stack. It started as a Create React App project and now runs on Bun, Vite, and TypeScript. The unsafe eval() was replaced with a small hand-written parser, and a typed-expression input was added on top of the usual keypad.

It is meant to be a calculator you actually reach for: mouse, touch, keyboard, or a typed expression like (3 + 5) * 6 all work, results are accurate, and bad input fails gracefully instead of breaking the page. All 15 freeCodeCamp user stories pass.

System architecture:

(back to top)

Built With

Plus React Hook Form + Zod for the typed-expression input, and Testing Library for the component tests.

(back to top)

Features

• Two ways in, one engine. Use the keypad, your physical keyboard, or type a full expression into a validated text field — all routed to the same evaluator.
• No eval(). A tokenizer and recursive-descent parser handle operator precedence, unary minus, and parentheses safely.
• Graceful errors. Divide-by-zero, malformed input, and overflow show a recoverable Error; an error boundary keeps the app from white-screening.
• Validated input. Zod rejects stray characters and unbalanced parentheses; React Hook Form shows the message inline and disables submit until it's valid.
• Keyboard support. Digits, + - * /, Enter (=), Escape (clear), and Backspace.
• Accessible. aria-live readout, labelled controls, visible focus rings, and a reduced-motion path.
• Tested. 77 tests across the evaluator, formatter, schema, reducer, and the components (all 15 FCC user stories end-to-end).

(back to top)

Getting Started

Prerequisites

• Bun v1.3 or newer

Installation

git clone https://github.com/omunite215/FCC-JavaScript-Calculator.git
cd FCC-JavaScript-Calculator
bun install
bun run dev

The dev server runs at http://localhost:5173.

(back to top)

Usage

• Click the keys, or type on your keyboard.
• Or type a whole expression (e.g. 12 / 7) in the field and hit Evaluate.
• AC clears, ⌫ deletes the last entry.

Available scripts:

bun run dev        # start the dev server
bun run build      # type-check and build to dist/
bun run preview    # preview the production build
bun run test       # run the test suite
bun run lint       # lint the source

(back to top)

Roadmap

• Calculation history panel
• Percentage and sign-toggle keys
• Move to TypeScript 7 once typescript-eslint supports it

See the open issues for a full list of proposed features and known issues.

(back to top)

Contributing

Contributions make the open-source community a great place to learn and build. Any contributions you make are greatly appreciated.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a pull request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Om Patel

Project link: https://github.com/omunite215/FCC-JavaScript-Calculator

(back to top)

Acknowledgments

• DwinaTech — the tutorial the original build followed
• freeCodeCamp — the project brief and test suite
• Best README Template
• Shields.io

(back to top)

_{Built by Om Patel}