JavaScript Calculator Program | Calculator App with JavaScript
How to create a JavaScript calculator program. Here is the quick solution to making a simple calculator with basic HTML, CSS and JavaScript. This JavaScript Calculator App is very basic but works as per our expected.
To better understand this calculator program, you need to have basic knowledge of HTML, CSS, and JavaScript. This calculator will only able to perform basic mathematical operators such as addition, subtraction, multiplication, and division.
JavaScript Calculator Program
If you are a newbie and you do not have basic HTML, you do no need to worry. Because here I simplified this tutorial as best as we could. As you can see, we would need to create a button for inputting values, and a screen for display values.
The first element which is under the HTML body is the form element <form> … </form>. Also, add name attribute with value set "form". The form element is a container element that holds main calculator components. Visually you see The first class='resultscreen' division section, which contains the display area of the calculator.
Second, the horizontal line section contains the first set of four buttons. Similar, next three horizontal line section which holds twelve buttons. Every section contains four buttons. Furthermore, every button we add an onclick event. When any button clicks, specified onclick function execute. This function basically appends button values until click on = (class='result') button.
HTML
Create an HTML file named index.html and add the below code.
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaSctipt Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<form name="calculatorForm">
<div class="resultscreen">
<div class="heading">Calculator</div>
<input type="text" name="evalresult"/>
</div>
<div class="buttons">
<div class="line">
<input type="button" name="btn7" value="7" onClick="valuecal(btn7.value)"/>
<input type="button" name="btn8" value="8" onClick="valuecal(btn8.value)"/>
<input type="button" name="btn9" value="9" onClick="valuecal(btn9.value)"/>
<input type="button" name="btndivision" value="/" onClick="valuecal(btndivision.value)"/>
</div>
<div class="line">
<input type="button" name="btn4" value="4" onClick="valuecal(btn4.value)"/>
<input type="button" name="btn5" value="5" onClick="valuecal(btn5.value)"/>
<input type="button" name="btn6" value="6" onClick="valuecal(btn6.value)"/>
<input type="button" name="btnmultiply" value="*" onClick="valuecal(btnmultiply.value)"/>
</div>
<div class="line">
<input type="button" name="btn1" value="1" onClick="valuecal(btn1.value)"/>
<input type="button" name="btn2" value="2" onClick="valuecal(btn2.value)"/>
<input type="button" name="btn3" value="3" onClick="valuecal(btn3.value)"/>
<input type="button" name="btnsubtract" value="-" onClick="valuecal(btnsubtract.value)"/>
</div>
<div class="line">
<input type="button" name="btn0" value="0" onClick="valuecal(btn0.value)"/>
<input type="button" name="btnDot" value="." onClick="valuecal(btnDot.value)"/>
<input type="button" name="btnAddition" value="+" onClick="valuecal(btnAddition.value)"/>
<input type="button" name="result" value="=" onClick="evalresult.value=eval(evalresult.value)"/>
</div>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>CSS
Same way create a CSS file named style.css and add the following styles.
body {
background: #1f2326;
}
.container {
width: 300px;
background: #1f2326;
border-radius: 5px;
box-shadow: 0 15px 50px 0 rgba(0,0,0,0.4), 0 15px 20px 0 rgba(0,0,0,0.2);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.heading {
text-align: left;
font-size: 22px;
color: #000000;
padding: 10px 0 0 10px;
}
.resultscreen {
height: 110px;
width: 100%;
position: relative;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #fafafa;
}
input[type='text'] {
width: 300px;
padding-right: 10px;
position: absolute;
bottom: 0;
border: none;
text-align: right;
font-size: 40px;
color: #000000;
background: none;
}
.line {
width: 300px;
}
input[type='button'] {
float: left;
font-size: 24px;
line-height: 70px;
margin: 1;
width: 73px;
height: 70px;
border: none;
color: #fafafa;
cursor: pointer;
outline: none;
background: #2d2d2d;
}
input[type='button'][value='0'] {
border-bottom-left-radius: 5px;
}
input[type='button'][value='='] {
background: #ec2629;
color: #ffffff;
border-bottom-right-radius: 5px;
}JS
Finally, create a JavaScript file named script.js and add the following javascript code.
function valuecal(result){
calculatorForm.evalresult.value = calculatorForm.evalresult.value + result;
}Final Thoughts
That all you need to know how to make a JavaScript calculator app using HTML, CSS, and JavaScript. Furthermore, we perform basic mathematical operators: addition, subtraction, multiplication, and division. Thus we create a basic calculator app with interactive design.
We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other JavaScript related articles.
If you like our article, please consider buying a coffee for us.
Thanks for your support!
Buy me a coffee!
Join the Discussion.