The calculator is one of the most complex lessons in the JavaScript programming language. Some high-quality JavaScript code is used to build it. If you want to make a calculator using only simple HTML, CSS, and JavaScript programming language, I will help you completely.
I am Santanu Jana a web designer. I will tell you how you can easily build a calculator using JavaScript programming language with the help of my experience over the last five years. JavaScript programming language is the most commonly used language for calculators. It also uses a lot of HTML and CSS programming languages.
In the same way, I have made this calculator shown below using only HTML, CSS, and JavaScript programming languages.
Demo and Download Source Code.
Some special information about this calculator
💗 JavaScript code has been used to build this calculator, as well as a small amount of HTML and CSS programming languages.
💙 I have tried to make the codes used here as easy as possible for you to learn.
💝 It works just like a normal calculator, which is a simple calculator. I have tried to put everything in this calculator. You can do everything like addition, subtraction, multiplication, division in this calculator.
💚 A special feature of this calculator is that here you can find solutions to many problems at once.
💛 Below is a delete button. By clicking there you can delete the previous calculations and make new calculations.
💜 This is a very stylish and professional calculator that has used the simplest code to create.
Hope you like this calculator.
How to make this calculator Using HTML, CSS, and JavaScript
Below are all the programming codes I have used to make this calculator. Such as HTML code, CSS code, and JavaScript code. You can easily copy those codes and use them in any project or personal work. Below I am simply saying and showing how you will use it in your project.
Step 1
First of all, you have to create an HTML file. To create an HTML file, open Notepad, and save without typing anything. When saving, rename to your liking and save with dot HTML(Rename.html). Then copy the structure below and paste it into your HTML file. Then you copy the HTML codes below and paste the HTML codes below in the structure where the ad HTML code is written.HTML TAGS (<body> Add Code </body>)
<div class="calc">
<div class="calc-title">
<span class="calc-title-span">
Calculater
</span>
<div class="calc-title-hr"></div>
</div>
<div class="calc-display">
<div class="calc-display-span secondary-display" id="secondary-display">
</div>
<div class="calc-display-span primary-display" id="display">
</div>
<!-- const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display"); -->
</div>
<div class="calc-display-hr"></div>
<div class="calc-btn" id="btn">
<button class="calc-btn-primary" id="seven">7</button>
<button class="calc-btn-primary" id="eight">8</button>
<button class="calc-btn-primary" id="nine">9</button>
<button class="calc-btn-primary btn-bg" id="divide">/</button>
<button class="calc-btn-primary" id="four">4</button>
<button class="calc-btn-primary" id="five">5</button>
<!-- const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display"); -->
<button class="calc-btn-primary" id="six">6</button>
<button class="calc-btn-primary btn-bg" id="multiply">*</button>
<button class="calc-btn-primary" id="one">1</button>
<button class="calc-btn-primary" id="two">2</button>
<button class="calc-btn-primary" id="three">3</button>
<button class="calc-btn-primary btn-bg" id="add">+</button>
<button class="calc-btn-primary btn-bg" id="decimal">.</button>
<button class="calc-btn-primary" id="zero">0</button>
<!-- const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display"); -->
<button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
<button class="calc-btn-primary btn-bg" id="subtract">-</button>
<button class="calc-btn-clear" id="clear">clear</button>
</div>
</div>
Step-2
I hope you have been able to paste the HTML code into your project very nicely. Now you can paste the CSS code into your project. For this, you copy the codes below and paste the codes in the upper structure where the ad CSS code is written.CSS CODE (<head><style> Add code</style></head>)
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
body {
width : 100%;
height : 750px;
display: flex;
flex-direction : column;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
background-color: #ebedef;
padding: 0;
margin: 0;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc {
display: flex;
flex-direction : column;
width: 330px;
height: 600px;
margin : 10px;
background-color: #000000;
background-image: linear-gradient(315deg, #000000 0%, #414141 104%);
border-radius: 20px;
box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-title {
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
align-items: center;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-title-span {
color: #fb7454;
font-size: 15px;
letter-spacing: 1px;
font-weight: 700;
line-height: 20px;
}
.calc-title-hr {
width: 200px;
height: 3px;
background-color: #fb7454;
opacity: 0.8;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-display {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100px;
color: #fff;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.secondary-display{
font-size:20px;
opacity : 0.8;
overflow-x : hidden;
}
.secondary-display::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
height : 4px;
background-color: #bdbdbd;
opacity: 0.7;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.secondary-display::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000000;
border: 3px solid #555555;
}
.primary-display::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.primary-display::-webkit-scrollbar {
height : 4px;
background-color: #bdbdbd;
opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000000;
border: 3px solid #555555;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-display-hr {
width: 250px;
height: 2px;
margin-top: 10px;
align-self: center;
background-color: #bdbdbd;
opacity: 0.4;
}
.calc-btn {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
margin: 20px;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-btn-primary {
cursor: pointer;
font-family: 'Montserrat', sans-serif;
margin: 10px 5px;
outline: none;
border: none;
background-color: transparent;
color: #fff;
font-size: 30px;
width: 60px;
height: 60px;
border: 2px solid #616161;
border-radius: 100%;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.btn-bg{
background-color:#424242 !important;
opacity : 0.9;
border : none !important;
}
.btn-bg-equal{
background-color:#ff7555 !important;
border : none !important;
}
.calc-btn-primary:focus {
outline:none
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-btn-primary:active {
transform: scale(0.9);
}
.calc-btn-clear {
margin: 20px 5px;
outline: none;
border: none;
background-color: transparent;
color: #fff;
font-size: 30px;
padding: 10px 90px;
border: 3px solid #ff7555;
border-radius: 10px;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-btn-clear:active {
transform: scale(0.9);
}
Step 3
Hope you have nicely posted the HTML and CSS code to your project. Now to make this calculator you need to add the most necessary code to your project i.e. JavaScript programming code. I have used most of the JavaScript programming code to make this calculator. However, I have tried to write as easily as possible when using programming code. You copy the code below and paste it into your HTML file where the ad javascript is written. It is a very simple and simple procedure.JavaScript Code (<body><script> Add code</script></body>)
console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
primaryDisplay.innerText = value;
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
const secondaryRender = (value) => {
secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');
const evaluate = (e) => {
let width = secondaryDisplay.scrollWidth;
if(width > 310){
secondaryDisplay.style.overflowX = 'scroll';
secondaryDisplay.scrollLeft = width;
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
else{
secondaryDisplay.style.overflowX = 'hidden';
}
let value = e.target.innerText;
if (value >= '0' && value <= '9') {
let len = currentString.length;
let lastOp = isOp(currentString[len - 1]);
if (lastOperator) {
currentString = currentString.concat(value);
resultString = "".concat(value);
secondaryRender(currentString);
primaryRender(resultString);
lastOperator = false;
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
} else {
currentString = currentString.concat(value);
resultString = resultString.concat(value);
secondaryRender(currentString);
primaryRender(resultString);
}
} else if (isOp(value)) {
if (currentString.length == 0 && (value == '/' || value == '*'));
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
else {
resultString = "";
primaryRender(value);
lastOperator = true;
let len = currentString.length;
let lastOp = isOp(currentString[len - 1]);
if (lastOp) {
currentString = currentString.substr(0, len - 1) + value;
console.log(currentString);
secondaryRender(currentString);
decimal = false;
} else {
currentString = currentString.concat(value);
secondaryRender(currentString);
}
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
} else if (value == '.') {
if (resultString.indexOf('.') < 0) {
if (resultString.length == 0) {
currentString = currentString.concat('0.');
resultString = resultString.concat('0.');
secondaryRender(currentString);
primaryRender(resultString);
}/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
else {
currentString = currentString.concat(value);
resultString = resultString.concat(value);
secondaryRender(currentString);
primaryRender(resultString);
}
}
} else if (value == '=') {
secondaryDisplay.style.overflowX = 'hidden';
if (currentString.length == 0);
else {
let result = eval(currentString);
resultString = '';
currentString = '';
secondaryRender('0');
primaryRender(result);
}/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
} else if (value == 'clear') {
currentString = '';
resultString = '';
secondaryRender('0');
primaryRender('0');
}
let width1 = primaryDisplay.scrollWidth;
if(width1 > 310){
primaryDisplay.style.overflowX = 'scroll';
}
else{
primaryDisplay.style.overflowX = 'hidden';
}
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
for (let elem of btns.children) {
elem.addEventListener('click', evaluate);
}
function isOp(value) {
return (/\+|\-|\*|\//).test(value);
}
I hope you have pasted three programming codes into your project. If you encounter any problems while trying to copy this code, you can download the code for free by clicking on the download button there. If you have any questions or would like to know more about this calculator, you can let me know in the comments. I will try to help you as much as possible. Hopefully from this article, you have learned how to build a calculator using only common HTML, CSS, and JavaScript programming languages.
Special thanks to you for reading the end of the article.
❤Sharing is caring❤
