Every beginner programmer after learning the programming language basics want to use their skill and make some small projects and the most common project that every programmer does and should do is a calculator.
Today I will be making a calculator in javascript I will show you step by step how to make a calculator in javascript we will use HTML and CSS for styling.
This is a simple calculator you will be able to do addition, subtraction, division and multiplication. If you are learning javascript or you know javascript than you should try to make a calculator in javascript.
Don’t worry if you can’t do it or found a error I will give the source code of this project down or on github. You can preview the javascript calculator website here – Preview Javascript Calculator
Github source code – Click Here
Making a calculator in javascript
Contents
We will use Javascript, HTML and CSS for this calculator project. I am using vs code and I will recommend you to use vs code or you can use notepad. So first create a folder and follow the next step.
Create index.html
So first create index.html file which will be our calculator html structure so paste html code in this file. Here we will also link the javascript and css 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.0">
<title>JSCALCULATOR</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<h1><span id="JSCALCULATOR">JSCALCULATOR</span></h1>
<input type="number" id="num1">
<input type="number" id="num2">
<h1 id="result"><span id="i"></span></h1>
<button onclick='calculate("+")' id="add">Add</button>
<button onclick='calculate("*")' id="multiply">Multiply</button>
<button onclick='calculate("/")' id="divide">Divide</button>
<button onclick='calculate("-")' id="subtract">Subtract</button>
<h1><span id="Created_By_Coderzway">Created By <a href="https://coderzway.com">Coderzway</a></span></h1>
</body>
</html>
Create index.js
Now create index.js file this is where all our javascript will go this file will have logic of the calculator. Paste the javascript code in the index.js file
const num1 = document.getElementById('num1')
const num2 = document.getElementById('num2')
const resultDisplay = document.getElementById('result')
const calculate = (e) => {
let result = ''
switch (e) {
case '+':
result = parseInt(num1.value) + parseInt(num2.value)
resultDisplay.innerHTML = result
break;
case '-':
result = parseInt(num1.value) - parseInt(num2.value)
console.log(result);
resultDisplay.innerHTML = result
break;
case '/':
result = parseInt(num1.value) / parseInt(num2.value)
console.log(result);
resultDisplay.innerHTML = result
break;
case '*':
result = parseInt(num1.value) * parseInt(num2.value)
console.log(result);
resultDisplay.innerHTML = result
break;
default:
break;
}
}
Create index.css
In order to add design to the calculator we will add css to the calculator which will go in index.css so paste this css code in this file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
.row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.screen {
width: 100%;
height: 100px;
align-items: flex-end;
margin-bottom: 20px;
}
.screen input {
width: 100px;
height: 70px;
margin: 0 10px;
text-align: center;
border: 1px solid rgb(62, 125, 241);
}
.screen input::placeholder {
font-size: 2rem;
}
.btn {
background-color: rgb(62, 125, 241);
border: none;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 1rem;
font-weight: 600;
margin: 5px 10px;
width: 65%;
height: 50px;
text-transform: uppercase;
}
.btns {
width: 100%;
margin: 20px;
}
.logo {
width: 100%;
height: 200px;
align-items: flex-end;
margin-bottom: 20px;
}
.logo h1 {
font-size: 2.5rem;
text-transform: uppercase;
}
.blue {
color: rgb(62, 125, 241);
}
.bottom {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
}
.bottom h1 {
font-size: 1.2rem;
font-weight: 500;
}
a {
color: rgb(62, 125, 241);
text-decoration: none;
}
@media all and (min-width: 1100px) {
.logo {
height: 150px;
}
.logo h1 {
font-size: 3rem;
}
}
Now you can run the code if you are using vs code install the live server extension and click open with live server or if you are not using vs code then you can open the index.html file in chrome by clicking on it and you will see a beautiful calculator.
If you want to become a full stack web developer than read these article – Roadmap to become a full stack web developer.
Summary
So this was a simple tutorial on making a calculator in javascript it is very simple and easy. You can create your own calculator with different designs and more. I will be creating more projects tutorial on this website.
So do subscribe to coderzway newsletter for latest blog updates. Thank you for reading if you found this helpful share it with your friends and family thank you.