Calculator is used to perform calculations, and this app comes per-installed in our devices. Calculator being the most basic app is good project for practicing coding
In this post, you will learn how to make Calculator using HTML, CSS and JavaScript.
It is the most common JavaScript Project. This Calculator is responsive, means it will look good on all device screens
This project is easy and don't take much time either. Watch full video tutorial to create this Responsive Calculator
Video Tutorial of Calculator
I hope you've watched the above video tutorial till the end and understood the code logic used behind calculator. If you have any doubts, feel free to ask me in the comments.
This project is very easy, but if you want to get source codes or files of this calculator, you can easily copy or download them from the bottom of this blog post.
Calculator in JavaScript [Source Codes]
To create a Calculator using HTML, CSS and JavaScript
Create a folder. After naming the folder, create the files mentioned below inside this folder.
Create a index.html file. The Created file must have either .html or .htm extension, as it declares that this file is an HTML document. This is where we will write the structure of our document.
Paste the below code into this html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator in HTML CSS and JavaScript - Alins Code</title>
<!-- CSS Style File Link -->
<link rel="stylesheet" href="style.css">
</head>
<!-- This File is Provided by Alins Code -->
<body>
<div class="container">
<form name="calculator">
<div class="display">
<input type="text" name="display">
</div>
<div>
<div>
<input class="btn operator" type="button" value="AC" onclick="display.value = ''">
<input class="btn" type="button" value="7" onclick="display.value += '7'">
<input class="btn" type="button" value="4" onclick="display.value += '4'">
<input class="btn" type="button" value="1" onclick="display.value += '1'">
<input class="btn" type="button" value="00" onclick="display.value += '00'">
</div>
<div>
<input class="btn operator" type="button" value="/" onclick="div()">
<input class="btn" type="button" value="8" onclick="display.value += '8'">
<input class="btn" type="button" value="5" onclick="display.value += '5'">
<input class="btn" type="button" value="2" onclick="display.value += '2'">
<input class="btn" type="button" value="0" onclick="display.value += '0'">
</div>
<div>
<input class="btn operator" type="button" value="*" onclick="multi()">
<input class="btn" type="button" value="9" onclick="display.value += '9'">
<input class="btn" type="button" value="6" onclick="display.value += '6'">
<input class="btn" type="button" value="3" onclick="display.value += '3'">
<input class="btn" type="button" value="." onclick="display.value += '.'">
</div>
<div>
<input class="btn operator" type="button" value="DEL" onclick="display.value = display.value.toString().slice(0,-1)">
<input class="btn operator" type="button" value="-" onclick="sub()">
<input class="btn operator" type="button" value="+" onclick="add()">
<input class="btn operator equal" type="button" value="=" onclick="display.value = eval(display.value)">
</div>
</div>
</form>
</div>
<!-- JavaScript File Link -->
<script src="main.js"></script>
<!-- Visit:- alinscode.blogspot.com -->
</body>
</html>
Create a style.css file. The Created file must have .css extension, as it declares that this file is an CSS file. This is where we will write code to make our project look beautiful.
Paste the below code into this css file
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* This File is Provided by Alins Code */
:root{
--background: #e3f9ff;
--calc-bg: #3a4452;
--hover: royalblue;
--text: #fff;
}
body, .btn{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container{
background: var(--calc-bg);
max-width: 400px;
}
form div{
display: flex;
flex-direction: row;
}
form div div{
display: flex;
flex-direction: column;
}
.btn{
max-width: 100px;
max-height: 80px;
width: 25vw;
height: 20vw;
border: 0;
background: transparent;
color: var(--text);
font-weight: 600;
font-size: 20px;
}
.btn:active{
background: var(--hover);
}
.display{
display: flex;
justify-content: flex-end;
margin: 3%;
flex: 1;
height: 20vw;
max-height: 80px;
}
.display input{
background: transparent;
color: var(--text);
border: none;
height: 100%;
width: 100%;
text-align: right;
font-size: 28px;
font-weight: 500;
}
.operator{
color: aqua;
}
.equal{
max-height: 160px;
height: 80vw;
background: var(--hover);
color: var(--text);
}
.operator:active, .equal:active{
background: limegreen;
color: var(--text);
}
Create a main.js file. The Created file must either .js extension, as it declares that this file is an JavaScript file. This is where we will write the logic of our project.
Paste the below code into this javascript file
var a = 0, b = 0;
function add(){
a = calculator.display.value;
b = a.charAt(a.length-1);
if (b == '+' || b == '-' || b == '*' || b == '/'){
calculator.display.value = a.substring(0, a-1);
calculator.display.value += "+";
}else{
calculator.display.value += "+";
}
}
// This File is Provided by Alins Code
function sub(){
a = calculator.display.value;
b = a.charAt(a.length-1);
if (b == '+' || b == '-' || b == '*' || b == '/'){
calculator.display.value = a.substring(0, a-1);
calculator.display.value += "-";
}else{
calculator.display.value += "-";
}
}
function multi(){
a = calculator.display.value;
b = a.charAt(a.length-1);
if (b == '+' || b == '-' || b == '*' || b == '/'){
calculator.display.value = a.substring(0, a-1);
calculator.display.value += "*";
}else{
calculator.display.value += "*";
}
}
function div(){
a = calculator.display.value;
b = a.charAt(a.length-1);
if (b == '+' || b == '-' || b == '*' || b == '/'){
calculator.display.value = a.substring(0, a-1);
calculator.display.value += "/";
}else{
calculator.display.value += "/";
}
}
Once you created these files, link the CSS and JavaScript to the HTML file. If you don't want to do these then scroll down and download the source of this Mini Calculator project by clicking on the given download button
That's all, now you've successfully created a Calculator using HTML, CSS and JavaScript. If your code doesn't work or you've faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.
Calculator.zip
JavaScript Project
5.07KB
.zip