Calculator App Using TypeScript (original) (raw)

Last Updated : 22 Jan, 2025

A calculator app is a perfect project for practising TypeScript along with HTML and CSS. This app will have basic functionalities like addition, subtraction, multiplication, and division. It provides a clean and interactive interface for the user while using TypeScript to handle logic safely and efficiently.

What We’re Going to Create

We’ll build a calculator app with the following features:

• Basic arithmetic operations: addition, subtraction, multiplication, and division.
• An interactive display for user inputs and results.
• Responsive styling for a polished user experience.

Project Preview

TypeScript Calculator

Calculator App – HTML and CSS Setup

Below is the combined HTML and CSS code that structures and styles the calculator app

HTML `

`

**Explanation of the Code

1. **HTML Structure
   1. The display input field shows the current input or result.
   2. Buttons are grouped into numbers, operators, equals, and clear, laid out in a grid format.
2. **CSS Styling
   1. Provides a responsive and polished look with hover effects for buttons.
   2. Grid layout ensures proper alignment of buttons.

Calculator App – TypeScript Logic

The TypeScript code handles the calculator logic, including user input, operator selection, and computations.

JavaScript `

type Operator = '+' | '-' | '*' | '/';

class Calculator { private currentInput: string = ''; private previousInput: string = ''; private operator: Operator | null = null; public appendNumber(number: string): void { if (this.currentInput === '0' && number !== '.') { this.currentInput = number; } else if (number === '.' && !this.currentInput.includes('.')) { this.currentInput += number; } else { this.currentInput += number; } this.updateDisplay(); } public chooseOperator(operator: Operator): void { if (this.currentInput === '') return; if (this.previousInput !== '') { this.compute(); } this.operator = operator; this.previousInput = this.currentInput; this.currentInput = ''; } public compute(): void { let computation: number; const prev = parseFloat(this.previousInput); const current = parseFloat(this.currentInput); if (isNaN(prev) || isNaN(current)) return; switch (this.operator) { case '+': computation = prev + current; break; case '-': computation = prev - current; break; case '*': computation = prev * current; break; case '/': computation = prev / current; break; default: return; } this.currentInput = computation.toString(); this.operator = null; this.previousInput = ''; this.updateDisplay(); } public updateDisplay(): void { const display = document.getElementById('display') as HTMLInputElement; display.value = this.currentInput; } public clear(): void { this.currentInput = ''; this.previousInput = ''; this.operator = null; this.updateDisplay(); } }

const calculator = new Calculator(); document.getElementById('buttons')!.addEventListener('click', (event) => { const target = event.target as HTMLElement; if (target.classList.contains('number')) { calculator.appendNumber(target.innerText); } else if (target.classList.contains('operator')) { calculator.chooseOperator(target.innerText as Operator); } else if (target.classList.contains('equals')) { calculator.compute(); } else if (target.classList.contains('clear')) { calculator.clear(); } });

`

**In this example

• **Calculator class: Manages the current and previous inputs, operator, and computes results.
• **appendNumber: Appends numbers to the current input, preventing multiple leading zeros or decimal points.
• **chooseOperator: Stores the selected operator and moves the current input to the previous input.
• **compute: Performs the arithmetic operation based on the selected operator and updates the display.
• **updateDisplay: Updates the input field to show the current input.
• **clear: Resets all inputs and the operator.
• **Event listeners: Listens for button clicks to append numbers, choose operators, compute results, or clear the inputs.

Convert to JavaScript File

Now You need to convert the TypeScript file into JavaScript to render by browser. Use one of the following command-

npx tsc task.ts
tsc task.ts

• The command tsc task.ts compiles the calculator.ts TypeScript file into a task.js JavaScript file.
• It places the output in the same directory as the input file by default.

Complete Code

HTML `

`