Home >>Javascript Programs >How to build a calculator using JavaScript
How to build a calculator using JavaScript
How to build a calculator using JavaScript
Calculator is known to be one of the basic projects that should be known to a beginner of JavaScript or any other language that simply means that they should known the procedure to create it. This is the most basic project as it only entails arithmetic operations. The programmers just need to create a button for each number and the arithmetic operations. Add symbols and then add a screen that generally serves as a screen or LCD.
Method
Each of the buttons that is created has their own event handlers and functions in the code. The basic function does the work that whenever a number button is clicked then it prints the number that is indicated on the button into the textbox that is basically the screen. Then whenever an arithmetic operation is being clicked after a value that has been entered then it stores the value in the textbox to be the first-number and reset the value in the textbox to zero. After entering the second number the user will be calculating together with the first number and clicking the equals-to button, the equals to button will generally used to store the value in the textbox as the second number and then it will check the arithmetic you clicked. Once it has checked the arithmetic operation that the user will click, it will add or subtracts or multiply or divide the first-number and the second-number that will be depending on the arithmetic operation the user have clicked and then print the result back to the textbox that has been displayed.
Building the calculator
First of all we want to build the calculator. The calculator generally consists of two parts that is the display and the keys.
Here we are building a Simple calculator using JavaScript code. The JavaScript calculator Function is used in order to create the Calculator.
Please follow the below code that is building a simple calculator using JavaScript:
<!Doctype html>
<html>
<head>
<title>Javascript Calculator</title>
<!-- CSS Code -->
<style>
body {
background-color:#fff;
margin: 0px auto;
}
.calbody{
background: #097C9B;
border: 1px solid #ff0;
padding: 10px;
margin-left: 450px;
min-width: 27.4em;
max-width: 27.4em;
}
h1{
text-align: center;
font-size: 40px;
color: #003652;
}
#lcd{
text-align: right;
width: 23em;
height: 40px;
font-size: 18px;
}
#lcdu{
color: grey;
text-align: right;
width: 27.6em;
height: 35px;
font-size: 15px;
}
button{
background-color: #fff;
width: 80px;
height: 60px;
font-size: 20px;
border: 1px solid #097C9B;
}
button:hover{
background-color: #509CA9;
}
</style>
</head>
<body>
<h1>
Javascript Calculator</h1>
<div class="calbody">
<form name="lcdform">
<input id="lcdu" name="lcdsu" type="text" value="" />
<input id="lcd" name="lcds" type="text" value="0" />
</form>
<div id="calbutton">
<button id="num1" onclick="numone();">1</button>
<button id="num2" onclick="numtwo();">2</button>
<button id="num3" onclick="numthree();">3</button>
<button id="operationplus" onclick="operationplus();">+</button>
<button id="operationraistop" onclick="operationraistop();">^</button>
<button id="num4" onclick="numfour();">4</button>
<button id="num5" onclick="numfive();">5</button>
<button id="num6" onclick="numsix();">6</button>
<button id="operationmult" onclick="operationmult();">*</button>
<button id="operationsqrt" onclick="sqrots();">Sqrt()</button>
<button id="num7" onclick="numseven();">7</button>
<button id="num8" onclick="numeight();">8</button>
<button id="num9" onclick="numnine();">9</button>
<button id="operationminus" onclick="operationminus();">-</button>
<button id="clr" onclick="clr();">C</button>
<button id="operationperc" onclick="operationperc();">%</button>
<button id="num0" onclick="numzero();">0</button>
<button id="num00" onclick="numdobuzero();">00</button>
<button id="operationdivid" onclick="operationdivid();">/</button>
<button id="sumbit" onclick="equalsto();">=</button>
</div>
</div>
<!-- Javascript code -->
<script>
var firstnumber;
var secondnumber;
var result;
var operations;
function numone(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "1";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";
}
}
function numtwo(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "2";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";
}
}
function numthree(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "3";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";
}
}
function numfour(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "4";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";
}
}
function numfive(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "5";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";
}
}
function numsix(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "6";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";
}
}
function numseven(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "7";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";
}
}
function numeight(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "8";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "8";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";
}
}
function numnine(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "9";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";
}
}
function numzero(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "0";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "0";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";
}
}
function numdobuzero(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
return;
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";
}
}
function clr(){
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = "";
return;
}
function operationplus(){
operation = "+";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
//alert(firstnumber);
}
function operationmult(){
operation = "*";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationminus(){
operation = "-";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationdivid(){
operation = "/";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationperc(){
operation = "%";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function equalsto(){
secondnumber = parseInt(document.lcdform.lcds.value);
if (operation == "+")
{
result = firstnumber + secondnumber;
}
else if (operation == "*"){
result = firstnumber * secondnumber;
}
else if (operation == "-"){
result = firstnumber - secondnumber;
}
else if (operation == "/"){
result = firstnumber / secondnumber;
}
else if (operation == "%"){
if (document.lcdform.lcds.value == "0"){
result = firstnumber / 100;
document.lcdform.lcdsu.value = firstnumber + operation + "100";
}
else if (document.lcdform.lcds.value != "0") {
result = firstnumber / secondnumber * 100;
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;
}
}
else if (operation == "^"){
for (var i = 0; i < secondnumber; i++){
result = firstnumber * i;
}
}
document.lcdform.lcds.value ="";
document.lcdform.lcds.value = result.toString();
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();
return;
}
function sqrots(){
firstnumber = document.lcdform.lcds.value;
result = Math.sqrt(parseInt(document.lcdform.lcds.value));
document.lcdform.lcds.value = result;
document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;
}
function operationraistop(){
operation = "^";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
}
</script>
</body>
</html>
Output :
Total Downloads : 5
Login / Register To Download
Javascript Programs
JavaScript code to check number is Perfect or not
JavaScript code to check number is Armstrong or not
JavaScript code to check whether a Number is Prime or Not
JavaScript code to find largest of three numbers
Check number is palindrome or not in JavaScript
How to build a calculator using JavaScript
Disable right click on webpage with JavaScript
Print a fibonacci series in JavaScript
How to copy text to clipboard with JavaScript
How to Get browser details through JavaScript
Create a forward and back buttons in JavaScript
How to Get the size of a file with JavaScript
How to find absolute value of a number in JavaScript
Create functions with default arguments in JavaScript
Find the larger of two numbers in JavaScript
Count occurrence of a particular character in a string in JavaScript
Get current date, month and year in JavaScript
How to parse number from string in JavaScript
Reverse an array in JavaScript
Dynamically add CSS class with JavaScript
How to get the extension of a file using JavaScript
Generate random number within a range in JavaScript
Display Input Text into Lowercase using JavaScript
Check/Uncheck all Checkboxes on Button Click using JavaScript
Convert a number into different base in JavaScript
Print value of all checked (selected) Checkboxes on Button click using JavaScript
No Sidebar ads