simple calculator using html, css and javascript
simple calculator using html, css and javascript
Hello frends welcome to my blog.
Here is a simple blog on how to create calculator using html,css and javascript.
The calculator works upto five clicks and if you will click after five clicks the calculator would not work properly.
here is its image...
And here is its source code...
And I hope you will like this..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my calculator</title>
<style>
div{
width:500px;
height:500px;
background-color: lightblue;
position: relative;
top: 80px;
left: 80px;
}
button{
color: white;
background-color:green;
padding:15px;
font-size: 30px;
border: 2px solid black;
margin: 5px;
border-radius: 10px;
}
#calculation{
display:inline;
padding:10px;
font-size:20px;
}
</style>
</head>
<body>
<button id="shuru" onclick="assign()"> start </button>
<p id="calculation"> </p>
<br><br>
<button onclick="calc('1')" > 1 </button>
<button onclick="calc('2')" > 2 </button>
<button onclick="calc('3')" > 3 </button>
<button onclick="calc('+')" > + </button> <br>
<button onclick="calc('4')" > 4 </button>
<button onclick="calc('5')" > 5 </button>
<button onclick="calc('6')" > 6 </button>
<button onclick="calc('-')" > - </button> <br>
<button onclick="calc('7')" > 7 </button>
<button onclick="calc('8')" > 8 </button>
<button onclick="calc('9')" > 9 </button>
<button onclick="calc('*')" > * </button> <br>
<button onclick="calc('0')" > 0 </button>
<button onclick="calc('/')" > / </button> <br><br>
<button id="answer" style="width:30%;" onclick="document.getElementById('calculation').innerHTML =answer;" > result</button>
<script>
var num;
var answer;
var num1, num2, num3, num4;
var sign1, sign2, sign3, sign4;
var h1, h2, h3, h4;
var display;
function assign()
{
document.getElementById("shuru").style.color="black";
document.getElementById("calculation").innerHTML=""; document.getElementById("answer").innerHTML="result";
num=0;
num1=0;
answer=0;
num3=0;
display="";
}
function calc(x)
{
display = display + x ;
document.getElementById("calculation").innerHTML = display ;
num = num + 1 ;
switch (num)
{
case 1:
{
if( (x!="+") && (x!="-") && (x!="*") && (x!="/") )
{
num1=x;
}
}
break;
case 2:
{
if( (x=="+") || (x=="-") || (x=="*") || (x=="/") ) // x is sign
{
sign1=x;
}
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") ) // x is number
{
num2=0;
num1 += x;
h2=1;
}
}
break;
case 3:
{
if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && (h2==1) )
{
num1 += x ;
num3=0;
h3=1;
}
else if( ( (x=="+") || (x=="-") || (x=="*") || (x=="/") ) && (h2==1) )
{
sign2=x;
h3=2;
}
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") ) //x is num
{
h3=3;
num3=x;
if( sign1=="+" ) answer = parseFloat(num1)+ parseFloat(num3);
else if( sign1=="-" ) answer=parseFloat( num1 )- parseFloat( num3);
else if( sign1=="*" ) answer=parseFloat( num1 )* parseFloat( num3);
else if( sign1=="/" ) answer=parseFloat( num1 )/ parseFloat( num3);
}
}
break;
case 4:
{
if( ( (x=="+") || (x=="-") || (x=="*") || (x=="/") ) && ( h3==1 ) )
{
sign3=x;
h4=2;
}
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && ( h3==2) )
{
num4=x;
h4=3;
if( sign2=="+" ) answer=parseFloat(num1)+parseFloat(num4);
else if( sign2=="-" ) answer=parseFloat(num1)-parseFloat(num4);
else if( sign2=="*" ) answer=parseFloat(num1)*parseFloat(num4);
else if( sign2=="/" ) answer=parseFloat(num1)/parseFloat(num4);
}
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && ( h3==3 ) )
{
num4=x;
h4=4;
num4=num3+num4;
if( sign1=="+" ) answer=parseFloat(num1)+parseFloat(num4);
else if( sign1=="-" ) answer=parseFloat(num1)-parseFloat(num4);
else if( sign1=="*" ) answer=parseFloat(num1)*parseFloat(num4);
else if( sign1=="/" ) answer=parseFloat(num1)/parseFloat(num4);
}
else if( ( (x=="+") || (x=="-") || (x=="*") || (x=="/") ) && ( h3==3 ) )
{
sign3=x;
h4=5;
}
}
break ;
case 5:
{
//three 3 teen
if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && ( h4==2) )
{
num5=x;
if( sign3=="+" ) answer=parseFloat(num1)+parseFloat(num5);
else if( sign3=="-" ) answer=parseFloat(num1)-parseFloat(num5);
else if( sign3=="*" ) answer=parseFloat(num1)*parseFloat(num5);
else if( sign3=="/" ) answer=parseFloat(num1)/parseFloat(num5);
}
// four 4 char
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && ( h4==3 ) )
{
num5=x;
num5=num4+num5;
if( sign2=="+" ) answer=parseFloat(num1)+parseFloat(num5);
else if( sign2=="-" ) answer=parseFloat(num1)-parseFloat(num5);
else if( sign2=="*" ) answer=parseFloat(num1)*parseFloat(num5);
else if( sign2=="/" ) answer=parseFloat(num1)/parseFloat(num5);
}
// six 6 chah
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && ( h4==4) )
{
num5=x;
num5=num4+num5;
if( sign1=="+" ) answer=parseFloat(num1)+parseFloat(num5);
else if( sign1=="-" ) answer=parseFloat(num1)-parseFloat(num5);
else if( sign1=="*" ) answer=parseFloat(num1)*parseFloat(num5);
else if( sign1=="/" ) answer=parseFloat(num1)/parseFloat(num5);
}
else if( (x!="+") && (x!="-") && (x!="*") && (x!="/") && ( h4==5) )
{
num5=x;
if( sign3=="+" ) answer += parseFloat(num5);
else if( sign3=="-" ) answer -= parseFloat(num5);
else if( sign3=="*" ) answer *= parseFloat(num5);
else if( sign3=="/" ) answer /= parseFloat(num5);
}
}
break ;
}
}
</script>
</body>
</html>
Comments
Post a Comment