TypeScript Calculator Web Application

A modern, responsive calculator web application built with Node.js, Express, and TypeScript. Features both a visual calculator interface and an expression evaluator.

Features

• Visual Calculator: Interactive button-based calculator with a clean, modern UI
• Expression Evaluator: Input and evaluate mathematical expressions directly
• Keyboard Support: Full keyboard navigation and input support
• Responsive Design: Works seamlessly on desktop and mobile devices
• TypeScript: Fully typed codebase with comprehensive error handling
• REST API: Backend API for calculator operations
• Session Management: Multiple calculator sessions support
• Comprehensive Testing: Unit and integration tests with high coverage

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd typescript-calculator-webapp

2. Install dependencies:

npm install

3. Build the application:

npm run build

4. Start the server:

npm start

5. Open your browser and navigate to http://localhost:3000

Development

For development with auto-reload:

npm run dev

To watch for TypeScript changes:

npm run watch

Usage

Visual Calculator

The visual calculator provides a traditional calculator interface with:

• Number buttons (0-9)
• Basic operators (+, -, ×, ÷)
• Decimal point support
• Clear (C) and Clear All (AC) functions
• Equals button for calculations

Keyboard Shortcuts

• Numbers (0-9): Input digits
• Operators (+, -, *, /): Mathematical operations
• Enter or =: Calculate result
• Escape: Clear all
• Backspace: Clear current input
• .: Decimal point

Expression Evaluator

Enter mathematical expressions directly:

• 2 + 3 * 4 → 14
• (2 + 3) * 4 → 20
• 10 / 2 + 5 → 10
• 1.5 + 2.5 → 4

API Endpoints

Health Check

GET /health

Returns server health status.

Expression Evaluation

POST /api/calculate
Content-Type: application/json

{
  "expression": "2 + 3 * 4"
}

Response:

{
  "result": 14
}

Calculator Operations

POST /api/calculator/:sessionId/operation
Content-Type: application/json

{
  "operation": "digit",
  "value": 5
}

Supported Operations

• digit: Input a digit (0-9)
• decimal: Input decimal point
• operator: Input operator (+, -, *, /, =)
• clear: Clear current input
• clearAll: Reset calculator

Architecture

Backend (TypeScript/Node.js)

• Express Server: RESTful API and static file serving
• Calculator Class: Core calculation logic with state management
• Error Handling: Comprehensive error handling and validation
• Session Management: Multiple calculator instances per session

Frontend (Vanilla JavaScript)

• CalculatorUI Class: Manages UI interactions and API communication
• Responsive Design: CSS Grid and Flexbox for layouts
• Keyboard Support: Event listeners for keyboard navigation
• Error Handling: User-friendly error messages

Testing

Run all tests:

npm test

Run tests with coverage:

npm test -- --coverage

Test Coverage

• Calculator Logic: Unit tests for all mathematical operations
• API Endpoints: Integration tests for all REST endpoints
• Edge Cases: Division by zero, invalid expressions, etc.
• Error Handling: Comprehensive error scenario testing

Linting

Run ESLint:

npm run lint

Scripts

• npm run build: Compile TypeScript to JavaScript
• npm start: Start the production server
• npm run dev: Start development server with ts-node
• npm run watch: Watch TypeScript files for changes
• npm test: Run test suite
• npm run lint: Run ESLint
• npm run clean: Remove build artifacts

Project Structure

├── src/
│   ├── calculator.ts          # Core calculator logic
│   ├── server.ts             # Express server setup
│   └── __tests__/
│       ├── calculator.test.ts # Calculator unit tests
│       └── server.test.ts    # API integration tests
├── public/
│   ├── index.html           # Main HTML file
│   ├── styles.css           # CSS styles
│   └── calculator.js        # Frontend JavaScript
├── dist/                    # Compiled JavaScript (generated)
├── package.json
├── tsconfig.json
├── jest.config.js
├── .eslintrc.js
└── README.md

Technologies Used

• Backend: Node.js, Express, TypeScript
• Frontend: HTML5, CSS3, Vanilla JavaScript
• Testing: Jest, Supertest
• Linting: ESLint with TypeScript support
• Build: TypeScript Compiler

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Ensure all tests pass
6. Run linting
7. Submit a pull request

License

MIT License - see LICENSE file for details.

Future Enhancements

• Scientific calculator functions
• History of calculations
• Themes and customization
• WebSocket for real-time updates
• Progressive Web App (PWA) support
• Calculator memory functions (M+, M-, MR, MC)