How to make a calculator

byCodingFlicks -November 02, 2022

0

Welcome to today's blog. Today we will learn how to make a basic calculator with HTML, CSS, and inline javascript. There are many advanced-level calculators that can be made with Javascript. We have added only the functions that a basic calculator should have without going too deep. If you want to see what the calculator will look like after coding, check out the video below. There are many more such snippets on our blog that you may find useful. Discover them by clicking on the 'Load More' button at the bottom of the homepage.

I hope you have an idea about what will be the finished product and the design will look like. Now, what is Calculator? A calculator is a tool that performs calculations on numbers. Basic calculators can do basic operations like addition, multiplication, and so on. But Advanced level calculators can do even more complicated operations like trigonometric functions, hyperbolic functions, and so on.

In this blog, we are learning how to make a calculator in javascript. To design the calculator we first took a container div. We have taken a form element called 'box' inside it. The first input element that is taken inside the form element is the screen. ie where the numbers will be shown. Then we added the basic buttons of a calculator through the input element. The onclick Javascript function is used to make the calculator work. Apart from all the mathematical operations, we have included a clear button in the calculator. Once any evaluation is completed and the equal button is pressed, the display will clear itself when the user clicks on the 'C' button. We used the CSS flexbox property to bring the snippet to the center of the viewport. Containers and buttons are given a specified height and width. You can use any color or dimension at your convenience.

You May Also like:

How to make a calculator [ Source Code ]:

Write an HTML and CSS file and paste the following codes into there. Save the code and test it in your browser. If the code is not working for some reason then download the source code from the download button below.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>How to Make a Calculator</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<form id="box" name="box">
			<input type="text" class="screen" name="display"><br>
            <input type="button" class="button" value="C" onclick="box.display.value=''" id="del">
            <input type="button" class="button" value="/" onclick="box.display.value+='/'">
            <input type="button" class="button" value="*" onclick="box.display.value+='*'">
            <input type="button" class="button" value="<" onclick="box.display.value= box.display.value.slice(0,-1)"> <br>
            <input type="button" class="button" value="7" onclick="box.display.value+='7'">
            <input type="button" class="button" value="8" onclick="box.display.value+='8'">
            <input type="button" class="button" value="9" onclick="box.display.value+='9'">
            <input type="button" class="button" value="-" onclick="box.display.value+='-'"><br>
            <input type="button" class="button" value="4" onclick="box.display.value+='4'">
            <input type="button" class="button" value="5" onclick="box.display.value+='5'">
            <input type="button" class="button" value="6" onclick="box.display.value+='6'">
            <input type="button" class="button" value="+" onclick="box.display.value+='+'"><br>
            <input type="button" class="button" value="1" onclick="box.display.value+='1'">
            <input type="button" class="button" value="2" onclick="box.display.value+='2'">
            <input type="button" class="button" value="3" onclick="box.display.value+='3'">
            <input type="button" class="button" value="%" onclick="box.display.value+='%'"><br>
            <input type="button" class="button" value="." onclick="box.display.value+='.'">
            <input type="button" class="button" value="0" onclick="box.display.value+='0'">
            <input type="button" class="equal" value="=" onclick="box.display.value= eval(box.display.value)">
		</form>
	</div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
    background: #d1b48c;
}
.container {
    background: #3c4349;
	text-align: center;
	box-shadow: 0 12px 24px 1px rgba(0,0,0,0.6);
	height: 475px;
	width: 365px;
	padding: 10px;	
}
.screen {
    width: 91%;
    margin-bottom: 15px;
	color: #212121;
	background-color: #becd96;    
}
#box {
	background: #3c4349;
	padding: 15px;
}
input {
    border-radius: 5px;
	margin-bottom: 5px;
	color: #ffffff;
	font-size: 25px;
	padding: 10px;
	text-align: right;	
}
.button {
    background: #2f3130;
	border: none;
	width: 80px;
	height: 70px;
	position: relative;
	font-size: 25px;
	text-align: center;
	cursor: pointer;	
}
.button:hover {
	color: cadetblue;
}
.equal {
    cursor: pointer;
	font-size: 25px;
	border: none;
	width: 165px;
	height: 70px;
	background: cadetblue;
	text-align: center;	
}

We are hopeful that the code is working. You can find more code snippets when you click on a load more button below the website's Homepage. Code samples like these might help you to learn something new. We want to thank you for visiting our website.

DOWNLOAD HERE

Please do not enter any spam link in the comment box.