You can easily build a beautiful calculator using simple HTML, CSS, and JavaScript programming code. I have already made many more such calculators. You can see those if you want.
In this article, I have made a calculator that is very easy and can be made using a short programming code. I have mainly used HTML, CSS, and JavaScript programming code here. We hope you enjoy this JavaScript Calculator. From this article, you can easily and beautifully learn how to make this calculator.
Some special information about this JavaScript calculator
⏩ This calculator is basically designed like a Casio company's calculator.
⏩This calculator contains everything that a normal calculator has. Here you can add, subtract, multiply, divide everything. There are also many more facilities here.
⏩There are basically twenty buttons in total. Here are the on and off buttons. By clicking there you can turn the calculator on and off.
⏩Here is everything that is in the calculator of a normal Casio company.
⏩It is 2 cm in height and 5 cm in length and width. It is designed like a professional calculator. Its body color has been blackened.
Hope you are particularly interested in enhancing this calculator. I am sure that you can easily learn how to make this kind of calculator from this article. Below I have shown you step by step how to make this programming calculator. Below I have given the three types of source code required and show you how to add the code to your project.
Step 1: Add HTML code to create the structure of the calculator
The following code is the HTML programming code that was originally used to build the size of this calculator. You copy the HTML code below then paste it into the body tags in your HTML file.
<head>
<meta charset="UTF-8">
<title>Calc</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Keania+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="Calculator" ng-cloak>
<div ng-controller="ArthmeticController" class="container">
<div class="display-container">
<p class="casio">CASIO</p>
<div class="solar">
<span></span>
<span></span><!-- /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/-->
<span></span>
<span></span>
</div>
<span class="model"><i>fx</i>-85MS</span>
<p class="display">{{ equation }}</p>
</div>
<div class="input-container">
<div class="commandNum-container">
<div class="command-container">
<button ng-click="command('Off')">OFF</button>
<button ng-repeat="i in ['%','DEL']" ng-click="command(i)" ng-disabled="isOff">{{ i }}</button>
</div>
<div class="number-container calc-container">
<button ng-repeat="i in [7,8,9]" ng-click="updateCurrNum(i)" ng-disabled="isOff">{{ i }}</button></br>
<button ng-repeat="i in [4,5,6]" ng-click="updateCurrNum(i)" ng-disabled="isOff">{{ i }}</button></br>
<button ng-repeat="i in [3,2,1]" ng-click="updateCurrNum(i)" ng-disabled="isOff">{{ i }}</button></br>
<button class="zero" ng-click="updateCurrNum(0)" ng-disabled="isOff">0</button><!-- /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/-->
<button ng-click="addDecimal()" ng-disabled="isFloat" ng-disabled="isOff">.</button>
<button ng-click="calculate()" ng-disabled="isOff">=</button>
</div>
</div>
<div class="operator-container calc-container">
<span ng-repeat="i in ['AC', '+','-','*','/']" ng-disabled="isOff" ng-click="concatOperator(i)">
<button >{{ i }}</button>
</br>
</span>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="js/main.js"></script><!-- /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/-->
Step 2: Add css code to make it stylish
The following codes are CSS programming codes. These programming codes have been used to design and enhance the beauty of this calculator. Too much here I have used this programming code. Copy the codes below then paste them into the style tags inside the head tags in your HTML file. If you want to paste it into a separate CSS file, you must attach your CSS file to the HTML file.
body {
background: url( https://images.pexels.com/photos/139306/pexels-photo-139306.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb ) no-repeat;
background-size: cover;
}
.casio {
display: inline;
font-size: 26px;
font-weight: bold;
color: #9A9DA5;
font-family: 'Ubuntu', sans-serif;
letter-spacing: 1px;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
.container {
width: 400px;
background: #242632;
overflow: hidden;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin: 0 auto;
box-shadow: 0px 10px 19px rgba(49,49,49, .5);
}
.display-container {
padding: 20px;
width: 310px;
margin-left: 16px;
padding-bottom: 0px;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
.display-container .model {
display: block;
font-family: 'Times New Roman';
color: #9A9DA5;
text-indent: 12px;
}
.display {
clear: both;
padding: 20px;
background: #9EB3AF;
font-family: digital;
font-size: 24px;
border: 10px inset rgba(179, 158, 173,0.22); /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
text-align: right;
letter-spacing: 5px;
font-family: 'Ubuntu', sans-serif;
border-radius: 10px;
overflow: hidden;
}
.solar {
border: 5px inset #293C46;
background: #46463C;
width: 100px;
height: 30px;
float: right;
margin-bottom: 10px;
}
.solar span {
border-right: 2px solid #31342C;
width: 23.01px;
height: inherit; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
display: block;
float: left;
}
button {
background: #2C303B;
color: white;
border: 3px solid #191B21;
font-family: 'Montserrat', sans-serif;
padding: 5px;
margin: 5px;
font-size: 27px;
min-width: 70px;
min-height: 50px;
cursor: pointer;
float: left;
border-radius: 5px;
outline: none;
border-radius: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
.input-container {
overflow: hidden;
padding: 20px;
padding-top: 0;
border: 15px solid #242632;
border-top: 0;
border-bottom: 0;
padding-bottom: 50px;
}
.commandNum-container {
float: left;
}
.number-container {
clear: left;
border-radius: 30px;
}
.command-container button {
background: #4B494E; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
}
.command-container {
overflow: hidden;
float: left;
}
.calc-container {
overflow: hidden;
float: left;
}
.zero {
}
.command-container button:first-child {
background: #6B5BA4;
font-size: 20px; /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
}
.operator-container span:first-child button,
.command-container button:last-child {
background: #E38F4F;
color: black;
}
.calc-container:nth-child(2) {
}
.calc-container {
}
.operator-container {
}
.operator-container span:last-child button { /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
}
Step 3: Add JavaScript code to complete the calculator
The following programming codes are JavaScript programming codes. Which basically gave this calculator the working power. You copy the following codes and then paste them inside the body tags into the script tags in your HTML file.
var app = angular.module('Calculator', []);
app.controller('DisplayController', ['$scope', function($scope) {
$scope.display = "";
}]);
app.controller('ArthmeticController', ['$scope', function($scope){
$scope.operatorLastUsed = false;
$scope.equation = "0";
$scope.isFloat = false;
$scope.isInit = true;
$scope.isOff = false;
$scope.concatOperator = function(operator) { /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
if(operator === 'AC')
{
$scope.equation = "0";
$scope.isInit = true;
}
else
{
if(!$scope.equation[$scope.equation.length - 1].match(/[-+*\/]/))
{
$scope.equation += operator;
$scope.isFloat = false;
}
}
}
$scope.command = function(command) {
if(command === 'Off') /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
{
if($scope.isOff === false)
{
$(".display").css("color", '#95A799');
$("button:contains('OFF')").text("ON");
$scope.isOff = true;
} else
{
$(".display").css("color", 'black');
$("button:contains('ON')").text("OFF");
$scope.isOff = false;
}
} else if(command === '%')
{
if(!$scope.equation[$scope.equation.length - 1].match('%'))
{
$scope.equation += "%";
}
} else if(command === 'DEL')
{
if($scope.equation.length == 1) /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
{
$scope.equation = $scope.equation.substring(0,$scope.equation.length - 1);
$scope.equation = "0";
$scope.isInit = true;
} else {
$scope.equation = $scope.equation.substring(0,$scope.equation.length - 1);
}
}
}
$scope.addDecimal = function() {
$scope.isFloat = true;
$scope.equation += ".";
}
$scope.updateCurrNum = function(num) {
if($scope.isInit)
{
$scope.equation = num.toString();
$scope.isInit = false;
} else
$scope.equation += num;
} /* background: #2C303B;color: white;border: 3px solid #191B21;font-family: 'Montserrat', sans-serif;padding: 5px;margin: 5px;font-size: 27px;min-width: 70px;min-height: 50px;cursor: pointer;float: left;border-radius: 5px;outline: none;border-radius: 10px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}.input-container {overflow: hidden;padding: 20px;padding-top: 0;border: 15px solid #242632;border-top: 0;border-bottom: 0;padding-bottom: 50px;}*/
$scope.calculate = function() {
$scope.equation = eval($scope.equation).toString();
}
}]);
For the above codes I have shown step by step which code I have used for what purpose. If you have difficulty copying the above code and adding it to the project. However, you can download the programming codes by clicking on the download button above. Then you can make this calculator by adding your own project.
I am sure you have made this javascript calculator beautifully and have learned how to make a simple calculator.
❤Sharing is caring❤
![How To Make Calculator Using JavaScript [ 5 KB Code ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgiASahsiFM0T8U8xQt_XIKpQcW9jGW6bRshjkVR3HU6I1Zz5r7RExkpNY7QA7WDbkto4iqsAAPebe90OIZ82-3wsqaAAq_JnQX29zf9iI4FvB36PS6hxXCmWl1Ozru3cj2kVm4gnOt4/w680/make+calculator+using+javascript+code.jpg)
