Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Create a Calculator using HTML, CSS, and JavaScript
To create a calculator using HTML, CSS, and JavaScript, we need to have basic understanding of working of HTML, CSS and JavaScript. Calculator is a simple tool which performs basic arithmetic calculations like Addition, Subtraction, Multiplication and Division. In this article, we are going to discuss how to create a Calculator using HTML, CSS, and JavaScript. Usually, if we observe any real-time calculator we know that it has:
- A grid of numbers (0-9 and 00).
- Basic arithmetic operators (+, -, /, x, %).
- Some symbols for special operations such as (clear, backspace and equal)
The output of our Real Time Calculator will be displayed as below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#calc {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#content {
border: 2px solid #2c302c;
background: white;
padding: 20px;
border-radius: 10px;
}
#content form input {
border: 2px solid #2c302c;
outline: 0;
width: 50px;
height: 50px;
border-radius: 8px;
font-size: 15px;
margin: 10px;
cursor: pointer;
}
#backspace {
background-color: rgb(237, 89, 30);
color: white;
}
#res {
background: #9e9a90;
padding: 10px;
color: white;
}
#clear {
background-color: rgb(237, 89, 30);
color: white;
}
form #output {
display: flex;
justify-content: flex-end;
margin: 15px 0;
}
form #output input {
text-align: right;
flex: 1;
font-size: 25px;
}
</style>
</head>
<body>
<div id="calc">
<div id="content">
<form>
<div id="output">
<input type="text" id="res">
</div>
<div class="btn">
<input type="button" value="C" onclick="Clear()" id="clear">
<input type="button" value="?" onclick="Back()" id="backspace">
<input type="button" value="%" onclick="Solve('%')">
<input type="button" value="/" onclick="Solve('/')">
<br>
<input type="button" value="7" onclick="Solve('7')">
<input type="button" value="8" onclick="Solve('8')">
<input type="button" value="9" onclick="Solve('9')">
<input type="button" value="x" onclick="Solve('*')">
<br>
<input type="button" value="4" onclick="Solve('4')">
<input type="button" value="5" onclick="Solve('5')">
<input type="button" value="6" onclick="Solve('6')">
<input type="button" value="-" onclick="Solve('-')">
<br>
<input type="button" value="1" onclick="Solve('1')">
<input type="button" value="2" onclick="Solve('2')">
<input type="button" value="3" onclick="Solve('3')">
<input type="button" value="+" onclick="Solve('+')">
<br>
<input type="button" value="00" onclick="Solve('00')">
<input type="button" value="0" onclick="Solve('0')">
<input type="button" value="." onclick="Solve('.')">
<input type="button" value="=" onclick="Result()">
</div>
</form>
</div>
</div>
<script>
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
try {
var num2 = eval(num1.replace('x', '*'));
document.getElementById('res').value = num2;
} catch {
document.getElementById('res').value = 'Error';
}
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0, -1);
}
document.addEventListener('keydown', function (event) {
const key = event.key;
const validKeys = '0123456789+-*/.%';
if (validKeys.includes(key)) {
Solve(key === '*' ? 'x' : key);
} else if (key === 'Enter') {
Result();
} else if (key === 'Backspace') {
Back();
} else if (key.toLowerCase() === 'c') {
Clear();
}
});
</script>
</body>
</html>
Components of the Calculator
HTML Structure
HTML provides the basic structure of our calculator. It creates the input field for display, and buttons for numbers and operations. We use the onclick event to trigger JavaScript functions when buttons are clicked.
CSS Styling
CSS is used to style the calculator and make it visually appealing. It positions buttons in a grid layout using flexbox, sets colors, fonts, and creates a centered calculator interface with rounded corners and proper spacing.
JavaScript Functionality
JavaScript adds interactive functionality to the calculator. It handles button clicks, performs calculations, manages the display, and even supports keyboard input for a better user experience.
Creating a Calculator using HTML, CSS, and JS
Below is the step-by-step breakdown of creating the calculator with separate HTML, CSS, and JavaScript files.
HTML Code
This HTML file creates the calculator structure with buttons and display area:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calc">
<div id="content">
<form>
<div id="output">
<input type="text" id="res">
</div>
<div class="btn">
<input type="button" value="C" onclick="Clear()" id="clear">
<input type="button" value="?" onclick="Back()" id="backspace">
<input type="button" value="%" onclick="Solve('%')">
<input type="button" value="/" onclick="Solve('/')">
<br>
<input type="button" value="7" onclick="Solve('7')">
<input type="button" value="8" onclick="Solve('8')">
<input type="button" value="9" onclick="Solve('9')">
<input type="button" value="x" onclick="Solve('*')">
<br>
<input type="button" value="4" onclick="Solve('4')">
<input type="button" value="5" onclick="Solve('5')">
<input type="button" value="6" onclick="Solve('6')">
<input type="button" value="-" onclick="Solve('-')">
<br>
<input type="button" value="1" onclick="Solve('1')">
<input type="button" value="2" onclick="Solve('2')">
<input type="button" value="3" onclick="Solve('3')">
<input type="button" value="+" onclick="Solve('+')">
<br>
<input type="button" value="00" onclick="Solve('00')">
<input type="button" value="0" onclick="Solve('0')">
<input type="button" value="." onclick="Solve('.')">
<input type="button" value="=" onclick="Result()">
</div>
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS Code
The style.css file styles the calculator with a centered layout and button formatting:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#calc {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#content {
background: #2c302c;
padding: 20px;
border-radius: 10px;
}
#content form input {
border: 0;
outline: 0;
width: 50px;
height: 50px;
border-radius: 8px;
font-size: 15px;
margin: 10px;
cursor: pointer;
}
#backspace {
background-color: rgb(237, 89, 30);
color: white;
}
#res {
padding: 10px;
}
#clear {
background-color: rgb(237, 89, 30);
color: white;
}
form #output {
display: flex;
justify-content: flex-end;
margin: 15px 0;
}
form #output input {
text-align: right;
flex: 1;
font-size: 25px;
}
JavaScript Code
The index.js file provides all the calculator functionality:
function Solve(val) {
var v = document.getElementById('res');
v.value += val;
}
function Result() {
var num1 = document.getElementById('res').value;
try {
var num2 = eval(num1.replace('x', '*'));
document.getElementById('res').value = num2;
} catch {
document.getElementById('res').value = 'Error';
}
}
function Clear() {
var inp = document.getElementById('res');
inp.value = '';
}
function Back() {
var ev = document.getElementById('res');
ev.value = ev.value.slice(0, -1);
}
document.addEventListener('keydown', function (event) {
const key = event.key;
const validKeys = '0123456789+-*/.%';
if (validKeys.includes(key)) {
Solve(key === '*' ? 'x' : key);
} else if (key === 'Enter') {
Result();
} else if (key === 'Backspace') {
Back();
} else if (key.toLowerCase() === 'c') {
Clear();
}
});
Key Functions Explained
- Solve(val): Appends clicked button values to the display
- Result(): Evaluates the mathematical expression and shows the result
- Clear(): Clears the entire display
- Back(): Removes the last entered character (backspace functionality)
- Keyboard Support: Allows users to input via keyboard keys
Conclusion
This calculator demonstrates how HTML, CSS, and JavaScript work together to create interactive web applications. The HTML provides structure, CSS handles styling and layout, while JavaScript adds functionality and user interaction capabilities.
103K+ Views
