Making A Calculator With Javascript

Making A Calculator With Javascript
Table of Contents

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

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

<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="add">Add</button>
            <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.

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

Share This Post
Share on facebook
Share on twitter
Share on email
Share on whatsapp

Leave a Reply

Subscribe To Our Newsletter

Get updates and learn from the best

Latest Guides & Articles