Calculator App Using TypeScript
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
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
#display {
width: 100%;
height: 50px;
font-size: 36px;
text-align: right;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
#buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 8px;
transition: background-color 0.3s;
}
button:hover {
background-color: #e2e2e2;
}
button:active {
background-color: #ccc;
}
.clear {
background-color: #ff4d4d;
color: white;
}
.clear:hover {
background-color: #ff3333;
}
.equals {
background-color: #4CAF50;
color: white;
grid-column: span 2;
}
.equals:hover {
background-color: #45a049;
}
.operator {
background-color: #f1f1f1;
}
.number {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="calculator">
<h1>TypeScript Calculator</h1>
<input type="text" id="display" disabled />
<div id="buttons">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">+</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">*</button>
<button class="number">0</button>
<button class="clear">C</button>
<button class="equals">=</button>
<button class="operator">/</button>
</div>
</div>
</body>
</html>
Explanation of the Code
- HTML Structure
- The display input field shows the current input or result.
- Buttons are grouped into numbers, operators, equals, and clear, laid out in a grid format.
- CSS Styling
- Provides a responsive and polished look with hover effects for buttons.
- 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
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
text-align: center;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
#display {
width: 100%;
height: 50px;
font-size: 36px;
text-align: right;
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 20px;
background-color: #f9f9f9;
border-radius: 8px;
}
#buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 8px;
transition: background-color 0.3s;
}
button:hover {
background-color: #e2e2e2;
}
button:active {
background-color: #ccc;
}
.clear {
background-color: #ff4d4d;
color: white;
}
.clear:hover {
background-color: #ff3333;
}
.equals {
background-color: #4CAF50;
color: white;
grid-column: span 2;
}
.equals:hover {
background-color: #45a049;
}
.operator {
background-color: #f1f1f1;
}
.number {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="calculator">
<h1>TypeScript Calculator</h1>
<input type="text" id="display" disabled />
<div id="buttons">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="operator">+</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="operator">-</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button class="operator">*</button>
<button class="number">0</button>
<button class="clear">C</button>
<button class="equals">=</button>
<button class="operator">/</button>
</div>
</div>
<script>
var Calculator = /** @class */ (function () {
function Calculator() {
this.currentInput = '';
this.previousInput = '';
this.operator = null;
}
Calculator.prototype.appendNumber = function (number) {
if (this.currentInput === '0' && number !== '.') {
this.currentInput = number;
}
else {
this.currentInput += number;
}
this.updateDisplay();
};
Calculator.prototype.chooseOperator = function (operator) {
if (this.currentInput === '')
return;
if (this.previousInput !== '') {
this.compute();
}
this.operator = operator;
this.previousInput = this.currentInput;
this.currentInput = '';
};
Calculator.prototype.compute = function () {
var computation;
var prev = parseFloat(this.previousInput);
var 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();
};
Calculator.prototype.updateDisplay = function () {
var display = document.getElementById('display');
display.value = this.currentInput;
};
Calculator.prototype.clear = function () {
this.currentInput = '';
this.previousInput = '';
this.operator = null;
this.updateDisplay();
};
return Calculator;
}());
var calculator = new Calculator();
document.getElementById('buttons').addEventListener('click', function (event) {
var target = event.target;
if (target.classList.contains('number')) {
calculator.appendNumber(target.innerText);
}
else if (target.classList.contains('operator')) {
calculator.chooseOperator(target.innerText);
}
else if (target.classList.contains('equals')) {
calculator.compute();
}
else if (target.classList.contains('clear')) {
calculator.clear();
}
});
</script>
</body>
</html>
Similar Reads
Quiz App Using Typescript A quiz app built with TypeScript provides an interactive way to test knowledge while using TypeScript’s strong typing for better code quality. By implementing features like multiple-choice questions, score tracking, and timers, we can create a robust and engaging quiz experience for users.What We’re
7 min read
Create a Calculator App Using Next JS Creating a Calculator app is one of the basic projects that clears the core concept of a technology. In this tutorial, we'll walk you through the process of building a calculator app using Next.js. Output Preview: Let us have a look at how the final output will look like. Prerequisites:NPM & Nod
3 min read
GPA Calculator using React GPA Calculator is an application that provides a user interface for calculating and displaying a student's GPA(Grade Point Average). Using functional components and state management, this program enables users to input course information, including course name, credit hours and earned grades and add
5 min read
Tip Calculator using React In this article, we will create a Tip Calculator using ReactJS. This project basically implements functional components and manages the state accordingly using the useState and useEffect hook of ReactJS. The user enters the Bill Amount, Tip Percentage and the number of persons then the output will r
5 min read
Scientific Calculator using React A scientific calculator is a tool, this project will be developed using REACT which performs basic and advanced calculations. In this project, our goal is to develop a web-based calculator using React. This calculator will have the capability to handle a range of functions.Preview of final output: L
5 min read