Calculator

A responsive calculator built with React and TypeScript. It supports common arithmetic operations, keyboard input, chained calculations, percentage handling, and three persistent visual themes.

Preview

Live Demo

Use the deployed application at:

magnificent-heliotrope-8e9d7b.netlify.app

Features

• Addition, subtraction, multiplication, division, and percentage operations
• Chained calculations without resetting between operations
• Keyboard controls for numbers, operators (including * multiplication), deletion, reset, and evaluation
• Three selectable color themes
• Theme preference saved in localStorage
• Thousands separators for easier-to-read values
• Scientific notation for results that exceed the display limit
• Graceful handling of invalid results such as division by zero
• Audio and vibration feedback where supported by the browser or device
• Responsive layout for mobile and desktop screens

Keyboard Controls

Key	Action
0–9	Enter a number
.	Enter a decimal point
+	Add
-	Subtract
x or *	Multiply
/	Divide
%	Calculate a percentage
Enter or =	Show the result
Backspace	Delete the last digit
Escape	Reset the calculator

Built With

• React — component-based user interface
• TypeScript — typed application logic
• Tailwind CSS — responsive styling and layout
• Vite — development server and production build tooling
• Web Audio API — button sound feedback
• Vibration API — supported-device haptic feedback
• Netlify — production deployment

Getting Started

Prerequisites

Install Node.js and npm. A current Node.js LTS release is recommended.

Installation

1. Clone the repository:

   git clone https://github.com/GlitchingghosT/Calculator.git

2. Enter the project directory:

   cd Calculator

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open the local URL displayed by Vite in your browser.

Available Scripts

Command	Description
npm run dev	Start the Vite development server
npm run build	Type-check and create a production build
npm run preview	Preview the production build locally
npm run lint	Check the project with ESLint
npm test	Run the Vitest regression suite

Project Structure

Calculator/
├── .github/workflows/ci.yml # Automated test, lint, and build checks
├── public/                 # Static icons and public assets
├── src/
│   ├── components/         # Calculator, display, keypad, and theme controls
│   ├── constants/          # Calculator button configuration
│   ├── lib/                # Tested arithmetic, formatting, input, and key mapping
│   ├── types/              # Shared TypeScript types
│   ├── App.tsx             # Application root component
│   ├── index.css           # Tailwind import, themes, and global styles
│   └── main.tsx            # React entry point
├── index.html
├── package.json
└── vite.config.ts

How It Works

The calculator stores the current display value, selected operator, first operand, input state, and error state in React. Pure engine functions handle arithmetic, result formatting, input limits, and keyboard mapping so edge cases can be verified independently with Vitest.

The interface defines each color scheme with CSS custom properties. Selecting a theme updates the document's data-theme attribute and stores the choice in localStorage, allowing the calculator to restore it on the next visit.

Future Improvements

• Add a visible calculation history
• Expand automated coverage for longer interaction sequences
• Add automated accessibility checks across all themes

Author

Emmanuel Nwachinemere (Bishop)

• GitHub: @GlitchingghosT
• LinkedIn: Emmanuel Nwachinemere