Javascript Calculator

Developer
Matheus
Size
3,484 Kb
Views
48,576
  1. Javascript Calculator Previews
  2. Javascript Calculator HTML Codes
  3. Javascript Calculator CSS Codes
  4. Javascript Calculator JS Codes

How do I make an javascript calculator?

What is a javascript calculator? How do you make a javascript calculator? This script and codes were developed by Matheus on 03 September 2022, Saturday.

Javascript Calculator Previews
IQ Test

Javascript Calculator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Javascript Calculator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="display"> <h4 id="digits"></h4> <h5 id="equation"></h5> </div> <div class="calculator"> <button class="numButtons" id="btnAC">AC</button> <button class="numButtons" id="btnCE">CE</button> <button class="numButtons" id="btnPercent">%</button> <button class="operatorButtons" id="btnDivide">&divide</button> <button class="numButtons" id="btn7">7</button> <button class="numButtons" id="btn8">8</button> <button class="numButtons" id="btn9">9</button> <button class="operatorButtons" id="btnMult">&times</button> <button class="numButtons" id="btn4">4</button> <button class="numButtons" id="btn5">5</button> <button class="numButtons" id="btn6">6</button> <button class="operatorButtons" id="btnMinus">-</button> <button class="numButtons" id="btn1">1</button> <button class="numButtons" id="btn2">2</button> <button class="numButtons" id="btn3">3</button> <button class="operatorButtons" id="btnPlus">+</button> <button class="numButtons" id="btn0">0</button> <button class="numButtons" id="btnDot">.</button> <button class="operatorButtons" id="btnEqual">=</button> </div>
</body> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Javascript Calculator - Script Codes CSS Codes

body{ height: 400px; background: linear-gradient(90deg, yellow, red); /* Standard syntax (must be last) */
}
.display{ background-color: black; width: 198px; height: 80px; margin: auto; position: relative; top: 101px; transform: translate(-8px);
}
h4{ color: white; text-align: right; padding-top: -5px; padding-right: 10px; font-size: 40px;
}
h5{ color: white; text-align: right; position: relative; bottom: 50px; padding-right: 15px; font-size: 20px;
}
.calculator{ position: relative; width: 212px; top: 100px; margin: auto; /*centers div*/
}
.numButtons{ background-color: white; width: 50px; height: 40px; border: 1px solid rgb(90,90,90);
}
.operatorButtons{ background-color: orange; width: 50px; height: 40px; border: 1px solid rgb(90,90,90);
}
#btnAC{ position: relative; top: 1px;
}
#btnCE{ position: relative; top: 1px; right: 5px;
}
#btnPercent{ position: relative; right: 10px; top: 1px;
}
#btnDivide{ position: relative; right: 15px; top: 1px;
}
#btn8{ position: relative; right: 5px;
}
#btn9{ position: relative; right:10px;
}
#btnMult{ position: relative; right: 15px;
}
#btn4{ position: relative; bottom: 1px;
}
#btn5{ position: relative; right: 5px; bottom: 1px;
}
#btn6{ position: relative; right: 10px; bottom: 1px;
}
#btnMinus{ position: relative; right: 15px; bottom: 1px;
}
#btn1{ position: relative; bottom: 2px;
}
#btn2{ position: relative; right: 5px; bottom: 2px;
}
#btn3{ position: relative; right: 10px; bottom: 2px;
}
#btnPlus{ position: relative; right: 15px; bottom: 2px
}
#btn0{ position: relative; bottom: 3px; padding-left: 10px; width: 99px
}
#btnDot{ position: relative; bottom: 3px; right: 5px;
}
#btnEqual{ position: relative; right: 10px; bottom: 3px;
}

Javascript Calculator - Script Codes JS Codes

$(document).ready(function(){ var operationFlag=0; var dotFlag=0; var equalFlag=0; var x = document.getElementById("digits"); x.innerHTML="0"; var y = document.getElementById("equation"); y.innerHTML="0"; $("#btnAC").click(function(){ //clears display and reset flags operationFlag=0; dotFlag=0; equalFlag=0; x = document.getElementById("digits"); y = document.getElementById("equation"); x.innerHTML="0"; y.innerHTML="0"; }); $("#btnCE").click(function(){ //clears last input operationFlag=0; dotFlag=0; x = document.getElementById("digits"); x.innerHTML="0"; }); $("#btnPercent").click(function(){ //clears last input operationFlag=0; dotFlag=0; x = document.getElementById("digits"); if(x.innerHTML != '+' && x.innerHTML != '-' && x.innerHTML != '\xD7' && x.innerHTML != '\xF7'){ var percent=parseFloat(x.innerHTML) console.log(percent); percent=0.01*percent; x.innerHTML=percent.toString(); } }); $("#btn0").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='0'; } else if(equalFlag==1){ equalFlag=0; x.innerHTML='0'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='0'; } else if (x.innerHTML.length<9){ x.innerHTML+='0'; } }); $("#btn1").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='1'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='1'; y.innerHTML='0'; } //new input after selected operation else if(operationFlag==1){ operationFlag=0; x.innerHTML='1'; } else if (x.innerHTML.length<9){ x.innerHTML+='1'; } }); $("#btn2").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='2'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='2'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='2'; } else if (x.innerHTML.length<9){ x.innerHTML+='2'; } }); $("#btn3").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='3'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='3'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='3'; } else if (x.innerHTML.length<9){ x.innerHTML+='3'; } }); $("#btn4").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='4'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='4'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='4'; } else if (x.innerHTML.length<9){ x.innerHTML+='4'; } }); $("#btn5").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='5'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='5'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='5'; } else if (x.innerHTML.length<9){ x.innerHTML+='5'; } }); $("#btn6").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='6'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='6'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='6'; } else if (x.innerHTML.length<9){ x.innerHTML+='6'; } }); $("#btn7").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='7'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='7'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='7'; } else if (x.innerHTML.length<9){ x.innerHTML+='7'; } }); $("#btn8").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='8'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='8'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='8'; } else if (x.innerHTML.length<9){ x.innerHTML+='8'; } }); $("#btn9").click(function(){ x = document.getElementById("digits"); y = document.getElementById("equation"); if (x.innerHTML=='0'){ x.innerHTML='9'; } //new input after displaying a result else if(equalFlag==1){ equalFlag=0; x.innerHTML='9'; y.innerHTML='0'; } else if(operationFlag==1){ operationFlag=0; x.innerHTML='9'; } else if (x.innerHTML.length<9){ x.innerHTML+='9'; } }); $("#btnPlus").click(function(){ dotFlag=0; x = document.getElementById("digits"); y = document.getElementById("equation"); var lastChar = x.innerHTML; if (lastChar != '+' && lastChar != '-' && lastChar != '&times' && lastChar != '&divide'){ operationFlag = 1; if (equalFlag){ y.innerHTML=x.innerHTML+'+'; x.innerHTML='+'; equalFlag=0; } else if (y.innerHTML != '0' && y.innerHTML.length < 15) y.innerHTML += x.innerHTML + '+'; else y.innerHTML = x.innerHTML + '+'; x.innerHTML = '+'; } }); $("#btnMinus").click(function(){ dotFlag=0; x = document.getElementById("digits"); y = document.getElementById("equation"); var lastChar = x.innerHTML; if (lastChar != '+' && lastChar != '-' && lastChar != '\xD7' && lastChar != '\xF7'){ operationFlag = 1; if (equalFlag){ y.innerHTML=x.innerHTML+'-'; x.innerHTML='-'; equalFlag=0; } else if (y.innerHTML != '0' && y.innerHTML.length < 15) y.innerHTML += x.innerHTML + '-'; else y.innerHTML = x.innerHTML + '-'; x.innerHTML = '-'; } }); $("#btnDivide").click(function(){ dotFlag=0; x = document.getElementById("digits"); y = document.getElementById("equation"); var lastChar = x.innerHTML; if (lastChar != '+' && lastChar != '-' && lastChar != '\xD7' && lastChar != '\xF7'){ operationFlag = 1; if (equalFlag){ y.innerHTML=x.innerHTML+'\xF7'; x.innerHTML='\xF7'; equalFlag=0; } else if (y.innerHTML != '0' && y.innerHTML.length < 15) y.innerHTML += x.innerHTML + '\xF7'; else y.innerHTML = x.innerHTML + '\xF7'; x.innerHTML = '\xF7'; } }); $("#btnMult").click(function(){ dotFlag=0; x = document.getElementById("digits"); y = document.getElementById("equation"); var lastChar = x.innerHTML; if (lastChar != '+' && lastChar != '-' && lastChar != '\xD7' && lastChar != '\xF7'){ operationFlag = 1; if (equalFlag){ y.innerHTML=x.innerHTML+'\xD7'; x.innerHTML='\xD7'; equalFlag=0; } else if (y.innerHTML != '0' && y.innerHTML.length < 15) y.innerHTML += x.innerHTML + '\xD7'; else y.innerHTML = x.innerHTML + '\xD7'; x.innerHTML = '\xD7'; } }); $("#btnDot").click(function(){ if (dotFlag==0){ dotFlag=1; x = document.getElementById("digits"); var lastChar = x.innerHTML; if (lastChar == '+' || lastChar == '-' || lastChar == '\xD7' || lastChar == '\xF7'){ operationFlag=0; x.innerHTML='.'; } else x.innerHTML+='.'; } }); $("#btnEqual").click(function(){ //var teste="10.93"; //teste=2*parseFloat(teste); //console.log(teste); var operationList=[]; var number=''; x = document.getElementById("digits"); //solves equation only if there's no pendent operation if (x.innerHTML[i] != '+' && x.innerHTML[i] != '-' && x.innerHTML[i] != '\xD7' && x.innerHTML[i] != '\xF7'){ //evaluate string, parsing math operations into a list for (var i=0; i<y.innerHTML.length; i++){ if (y.innerHTML[i] != '+' && y.innerHTML[i] != '-' && y.innerHTML[i] != '\xD7' && y.innerHTML[i] != '\xF7'){ number+=y.innerHTML[i]; } else{ operationList.push(parseFloat(number)); operationList.push(y.innerHTML[i]); number=''; } } operationList.push(parseFloat(x.innerHTML)); } console.log(operationList); //solves equation stored in 'operationList' list var answer=operationList[0]; for (var i=0; i<operationList.length; i++){ switch(operationList[i]){ case '+': answer+=operationList[i+1]; break; case '-': answer-=operationList[i+1]; break; case '\xD7': answer*=operationList[i+1]; break; case '\xF7': if (operationList[i+1]==0){ x.innerHTML='0'; y.innerHTML='0'; break; } else{ answer/=operationList[i+1]; break; } } } if (y.innerHTML != "0"){ equalFlag=1; y.innerHTML += x.innerHTML + '=' + answer.toPrecision(3).toString(); x.innerHTML = answer.toPrecision(3).toString(); } });
});
Javascript Calculator - Script Codes
Javascript Calculator - Script Codes
Home Page Home
Developer Matheus
Username MatheusLima92
Uploaded September 03, 2022
Rating 3
Size 3,484 Kb
Views 48,576
Do you need developer help for Javascript Calculator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matheus (MatheusLima92) Script Codes
Name
Voting App - register
Portfolio
Quote Machine
Wikipedia viewer
Pomodoro Clock
Camper LeaderBoard
Game of Life
Weather App
Recipe Box
Markdown Previewer
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!