Home > css > html > java-script > Calculator using Java script and HTML /CSS 3

Calculator using Java script and HTML /CSS 3

2:43:00 AM css, html, java-script

Calculator

<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>

No comments

Subscribe to: Post Comments ( Atom )