You can easily use calculator on your Blog/website very easily.This Calculator is made by using JavaScript, CSS, HTML.
Codes of Calculator
<style>
/*----- Calculator By www.widgetgenerators.blogspot.com ------ */
.btnLogin
{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-center:12px;
float:center;
padding:7px 21px;
}
.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
/*----- Calculator By www.widgetgenerators.blogspot.com ------ */
</style>
<script language='JavaScript'>
<!--------------------------------------------------------------------
Memory = "0"; // initialise memory variable
Current = "0"; // and value of Display ("current" value)
Operation = 0; // Records code for eg * / etc.
MAXLENGTH = 30; // maximum number of digits before decimal!
function AddDigit(dig) //ADD A DIGIT TO DISPLAY (keep as 'Current')
{ if (Current.indexOf("!") == -1) //if not already an error
{ if ( (eval(Current) == 0)
&& (Current.indexOf(".") == -1)
) { Current = dig;
} else
{ Current = Current + dig;
};
Current = Current.toLowerCase(); //FORCE LOWER CASE
} else
{ Current = "Hint! Press 'AC'"; //Help out, if error present.
};
if (Current.indexOf("e0") != -1)
{ var epos = Current.indexOf("e");
Current = Current.substring(0,epos+1) + Current.substring(epos+2);
};
if (Current.length > MAXLENGTH)
{ Current = "Aargh! Too long"; //don't allow over MAXLENGTH digits before "." ???
};
document.Calculator.Display.value = Current;
}
function Dot() //PUT IN "." if appropriate.
{
if ( Current.length == 0) //no leading ".", use "0."
{ Current = "0.";
} else
{ if ( ( Current.indexOf(".") == -1)
&&( Current.indexOf("e") == -1)
)
{ Current = Current + ".";
}; };
document.Calculator.Display.value = Current;
}
function DoExponent()
{
if ( Current.indexOf("e") == -1 )
{ Current = Current + "e0";
document.Calculator.Display.value = Current;
};
}
function PlusMinus()
{
if (Current.indexOf("e") != -1)
{ var epos = Current.indexOf("e-");
if (epos != -1)
{ Current = Current.substring(0,1+epos) + Current.substring(2+epos); //clip out -ve exponent
} else
{ epos = Current.indexOf("e");
Current = Current.substring(0,1+epos) + "-" + Current.substring(1+epos); //insert -ve exponent
};
} else
{ if ( Current.indexOf("-") == 0 )
{ Current = Current.substring(1);
} else
{ Current = "-" + Current;
};
if ( (eval(Current) == 0)
&& (Current.indexOf(".") == -1 )
) { Current = "0"; };
};
document.Calculator.Display.value = Current;
}
function Clear() //CLEAR ENTRY
{ Current = "0";
document.Calculator.Display.value = Current;
}
function AllClear() //Clear ALL entries!
{ Current = "0";
Operation = 0; //clear operation
Memory = "0"; //clear memory
document.Calculator.Display.value = Current;
}
function Operate(op) //STORE OPERATION e.g. + * / etc.
{
if (Operation != 0) { Calculate(); }; //'Press "=" if pending operation!
// note that design is not good for showing *intermediate* results.
if (op.indexOf("*") > -1) { Operation = 1; }; //codes for *
if (op.indexOf("/") > -1) { Operation = 2; }; // slash (divide)
if (op.indexOf("+") > -1) { Operation = 3; }; // sum
if (op.indexOf("-") > -1) { Operation = 4; }; // difference
Memory = Current; //store value
// note how e.g. Current.value gives neither error nor value! ***
Current = "";
document.Calculator.Display.value = Current;
}
function Calculate() //PERFORM CALCULATION (= button)
{
if (Operation == 1) { Current = eval(Memory) * eval(Current); };
if (Operation == 2)
{ if (eval(Current) != 0)
{ Current = eval(Memory) / eval(Current)
} else
{ Current = "Aargh! Divide by zero"; //don't allow over MAXLENGTH digits before "." ???
}
};
if (Operation == 3) { Current = eval(Memory) + eval(Current); };
if (Operation == 4) { Current = eval(Memory) - eval(Current); };
Operation = 0; //clear operation
Memory = "0"; //clear memory
Current = Current + ""; //FORCE A STRING!
if (Current.indexOf("Infinity") != -1) //eg "1e320" * 1
{ Current = "Aargh! Value too big";
};
if (Current.indexOf("NaN") != -1) //eg "1e320" / "1e320"
{ Current = "Aargh! I don't understand";
};
document.Calculator.Display.value = Current;
// NOTE: if no operation, nothing changes, Current is left the same!
}
function FixCurrent()
{
Current = document.Calculator.Display.value;
Current = "" + parseFloat(Current);
if (Current.indexOf("NaN") != -1)
{ Current = "Aargh! I don't understand";
};
document.Calculator.Display.value = Current;
}
//--------------------------------------------------------------->
</script>
</head>
<body>
<div align="center"><table width="95%"><tr><td> <!-- OUTER MARGIN -->
<font face="Verdana, Arial, Helvetica">
<div align="center"><table border="0"><tr><td width="15%" align="center"><p> </p>
<div align="center">
<FORM name="Calculator">
<table width="30%" border="4" bgcolor="#809FFE"><tr> <!--OUTER MARGIN OF CALCULATOR-->
<td colspan="2" align="center">
<p><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3">Calculator</font></b><b><font face="Verdana, Arial, Helvetica" color="#00000" size="3"><br>
</font>
<font face="Courier" size="5">
<input type="text" maxlength="40" size="25" name="Display" onChange="FixCurrent()">
</font></b> </p>
</td></tr>
<tr><td width="65%" align="center"> <!--left panel------>
<br><table><tr>
<td><input type="button" class="btnLogin" name="seven" value=" 7 " OnClick="AddDigit('7') "></td>
<td><input type="button" class="btnLogin" name="eight" value=" 8 " OnClick="AddDigit('8')"></td>
<td><input type="button" name="nine" class="btnLogin" value=" 9 " OnClick="AddDigit('9')"></td>
</tr><tr>
<td><input type="button" name="four" class="btnLogin" value=" 4 " OnClick="AddDigit('4')"></td>
<td><input type="button" name="five" class="btnLogin" value=" 5 " OnClick="AddDigit('5')"></td>
<td><input type="button" name="six" class="btnLogin" value=" 6 " OnClick="AddDigit('6')"></td>
</tr><tr>
<td><input type="button" name="one" class="btnLogin" value=" 1 " OnClick="AddDigit('1')"></td>
<td><input type="button" name="two" class="btnLogin" value=" 2 " OnClick="AddDigit('2')"></td>
<td><input type="button" name="three" class="btnLogin" value=" 3 " OnClick="AddDigit('3')"></td>
</tr><tr>
<td><input type="button" name="plusmin" class="btnLogin" value=" +/- " OnClick="PlusMinus()"></td>
<td><input type="button" name="one" class="btnLogin" value=" 0 " OnClick="AddDigit('0')"></td>
<td><input type="button" name="two" class="btnLogin" value=" . " OnClick="Dot()"></td>
</tr>
</table><br/>
</td> <!--end left panel-->
<td width="35%" align="center"> <!--right panel----->
<br><table><tr>
<td><input type="button" name="clear" class="btnLogin" value=" C " OnClick="Clear()"></td>
<td><input type="button" name="AC" class="btnLogin" value=" AC " OnClick="AllClear()"></td>
</tr><tr>
<td><input type="button" name="mul" class="btnLogin" value=" * " OnClick="Operate('*')"></td>
<td><input type="button" name="div" class="btnLogin" value=" / " OnClick="Operate('/')"></td>
</tr><tr>
<td><input type="button" name="add" class="btnLogin" value=" + " OnClick="Operate('+')"></td>
<td><input type="button" name="sub" class="btnLogin" value=" - " OnClick="Operate('-')"></td>
</tr><tr>
<td><input type="button" name="result" class="btnLogin" value=" = " OnClick="Calculate()"></td>
<td align="right"><input type="button" name="exp" class="btnLogin" value=" E X P " OnClick="DoExponent()"></td>
</tr></table><br/>
</td> <!--end right panel-->
</tr></table> <!--END OUTER MARGIN CALC------->
</FORM></div>
