Calculator using Java script and HTML /CSS

Calculator using Java script and HTML /CSS

By At 2:43:00 AM 1

Calculator
Welcome Calculator by JavaScript






By. Usman Siddique

<html>
<head>
<title> Calculator </title>
<style>
form{background-color:green;
text-align:center;
width:300px;
height:409px;margin:0 auto;
border:2px solid yellow;
}
form input{background-color:red;
width:60px;
height:60px;
margin:5px 5px;
font-size:14pt;
border-radius:50px;}
</style>

</head>
<body>
<form name="f">
<i>Welcome Calculator by JavaScript</i>
<br/>

<input type="text" name="result"  id="result" style="width:280px;
height:40px;text-indent:10px;"  >
<br/>
<input type="text" name="display"  id="display"style="width:140px;
height:25px;background-color:darkgray;font-size:10pt;text-indent:10px;" >

<input type="button" onClick="Sign()" name="sign" value="+/-" style="margin:0px 1px;width:60px;
height:25px;font-size:10pt" >

<input type="button" onClick="Clear()" value="C"  style="margin:1px 1px;width:60px;
height:25px;font-size:10pt"/>
<br/>

<input type="button" onClick="num1Perform()" name="num1" value="1" >
<input type="button" onClick="num2Perform()" name="num2" value="2" >
<input type="button" onClick="num3Perform()" name="num3" value="3" >
<input type="button" onClick="Addition()" value="+" >
<br/>
<input type="button" onClick="num4Perform()" name="num4" value="4" >
<input type="button" onClick="num5Perform()" name="num5" value="5" >
<input type="button" onClick="num6Perform()" name="num6" value="6" >
<input type="button" onClick="SubStract()" value="-" />
<br/>
<input type="button" onClick="num7Perform()" name="num7" value="7" >
<input type="button" onClick="num8Perform()" name="num8" value="8" >
<input type="button" onClick="num9Perform()" name="num9" value="9" >
<input type="button" onClick="Muliply()" value="*" />
<br/>
<input type="button" onClick="num0Perform()" name="num0" value="0" >
<input type="button" onClick="Decimal()" name="decimal" value="." />
<input type="button" onClick="Equal()" value="=" />
<input type="button" onClick="Divison()" value="/" />
<br/>
By. Usman Siddique

</form>
<script type="text/JavaScript">
var firstNum;
    var secondNum;
    var total;
    var plusminus;
    var plusClick;
    var minusClick;
    var multiplyClick;
    var devideClick;
var decimalClick;
 

function Clear() {                                
        // Clear
        document.f.result.value="";
document.f.display.value="";

    }
function num0Perform() {                                
        // Zero
document.f.display.value +=" 0";
        document.f.result.value += document.f.num0.value;
    }
function num1Perform() {                                
        // NO1
document.f.display.value +=" 1";
        document.f.result.value += document.f.num1.value;
    }
function num2Perform() {                                
        // NO2
document.f.display.value +=" 2";
        document.f.result.value += document.f.num2.value;
    }
function num3Perform() {                                
        // NO3
document.f.display.value +=" 3";
        document.f.result.value += document.f.num3.value;
    }
function num4Perform() {                                
        // NO4
document.f.display.value +=" 4";
        document.f.result.value += document.f.num4.value;
    }
function num5Perform() {                                
        // NO5
document.f.display.value +=" 5";
        document.f.result.value += document.f.num5.value;
    }
function num6Perform() {                                
        // NO6
        document.f.display.value +=" 6";
document.f.result.value += document.f.num6.value;
    }
function num7Perform() {                                
        // NO7
document.f.display.value +=" 7";
        document.f.result.value += document.f.num7.value;
    }
function num8Perform() {                                
        // NO8
document.f.display.value +=" 8";
        document.f.result.value += document.f.num8.value;
    }
function num9Perform() {                                
        // NO9
document.f.display.value +=" 9";
        document.f.result.value += document.f.num9.value;
    }
function Sign(){
document.f.display.value="-"+(document.f.result.value);
document.f.result.value="-"+(document.f.result.value);
}
function Addition(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" +";
document.f.result.value="";
plusClick = 1;
decimalClick=0

}
function SubStract(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" -";
document.f.result.value="";
minusClick=1;
decimalClick=0
}
function Muliply(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" *";
document.f.result.value="";
multiplyClick=1;
decimalClick=0
}
function Divison(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" /";
document.f.result.value="";
devideClick=1;
decimalClick=0
}
function Decimal(){
document.f.display.value=(document.f.result.value)+".";
document.f.result.value=(document.f.result.value+".");
}

function Equal(){
secondNum = (parseFloat(document.f.result.value));
if (plusClick > 0) {
total = firstNum + secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" + "+secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
plusClick = 0;
}


if(minusClick>0){
total = firstNum - secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" - "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
minusClick = 0;

}                                    
 if(multiplyClick>0){
total = firstNum * secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" * "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
multiplyClick = 0;

}

if(devideClick>0){
total = firstNum / secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" / "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
devideClick = 0;
}
}
</script>

</body>
</html>


1 comments

Subscribe to: Post Comments ( Atom )

My Instagram