Show Mobile Navigation

Thursday, September 29, 2016

, , ,

How to Create a Calculator with Javascript, HTML and CSS

Oyetoke Tobi - Thursday, September 29, 2016

Calculator is one of the basic project a javascript or any other programming newbie should probably know howto create. It is a basic project becasue it entails mathematical operations. All you have to do is to create a button for each numbers, mathematical operations symbols and then add a screen that serves as a screen or lcd.

Method

Each buttons created has their own event handlers and functions. Whenever a number button is clicked, it prints the number indicated on the button into the textbox which is the screen. Then when an arithemetic operation is clicked after a value has been entered, it stores the value in the textbox to be the firstnumber and reset the value in the textbox to zero. After entering the second number you'll be calculating together with the first number and clicking the equalsto buttton, the equals to button will store the value in the textbox as the second number and then it will check the arithemetic you clicked. Once it checked arithemetic operation you click, it will add or subtracts or multiply or divide the firstnumber and secondnumber depending on the arithemetic operation you clicked and then prints the result back to the textbox.

So in this tutorial, I'll explain how you can create a javascript calculator.

You'll be creating three files whereby one will hold the html, css for the design and the javascript for the function. So create an index.html, site.css, and main.js file. Then put the three files altogether in new a folder. Note: The three files must be in the same folder or else it wont work

Open the .html file and paste the below code in it

<!Doctype html>
<html>
<head>
<title>Javascript Calculator</title>
<link href="site.css" rel="stylesheet"></link>
<script src="main.js" type="text/Javascript"></script>
</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>
</body>
</html>

Then save it.

Now open the css file and paste the below code

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{
 
 width: 80px;
 height: 60px;
 font-size: 20px;
 border: 1px solid #097C9B;
 

}

button:hover{
  background-color: #509CA9; 
  
 }

Then save it.

Open the Javascript file and copy the below code in

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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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;
 
  
}
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 &lt; 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";
 
}

Then save it. Make sure the html, css and js files are in the same folder.

This is what should show if you run it.


Javascript Calculator







So in case you want the html, css and js to be in the same file, you can copy the below into an html file then save it and run it.

<!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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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")
 {
  document.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>



0 comments:

Post a Comment