# Making A Calculator With Javascript

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

## Making a calculator in javascript

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">

<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>
<script defer src="/js/index.js"></script>

<body>
<div class="column">
<div class="row logo">
<h1>JS<span class="blue">CALCULATOR</span></h1>
</div>
<div class="row screen">
<input type="number" id="num1">
<input type="number" id="num2">
</div>
<div class="row">
<h1 id="result"></h1>
</div>
<div class="column btns">
<button class="btn" onclick='calculate("*")' id="multiply">Multiply</button>
<button class="btn" onclick='calculate("/")' id="divide">Divide</button>
<button class="btn" onclick='calculate("-")' id="subtract">Subtract</button>
</div>
<div class="row bottom">
<h1>Created By <a href="https://coderzway.com">Coderzway</a></h1>
</div>
</div>
</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.

```				```
* {
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;
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.

Get updates and learn from the best

## Latest Guides & Articles

BLOGGING

### Complete Roadmap To Learn- DSA

Index Which Programming Language Should I Choose ? Data Structure & Algorithms -problem categories. Easy

Coding

### Flipkart Interview Experience | On-Campus 2023

Round 1: Written 3 questions in round 1. Candidates who solved all three questions get shortlisted