<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<table>
<tr>
<td colspan="7">
<input type="text" id="display" value="" />
</td>
</tr>
<tr>
<td>
<input id="btnAns" type="button" name="operator" value="Ans" />
</td>
<td>
<input id="btnPi" type="button" name="operator" value="π" onclick="set('3.14')" />
</td>
<td>
<input id="btnE" type="button" name="operator" value="e" />
</td>
<td>
<input id="btnOParen" type="button" name="operator" value="(" onclick="set('(')" />
</td>
<td>
<input id="btnCParen" type="button" name="operator" value=")" onclick="set(')')" />
</td>
<td>
<input id="btnPcnt" type="button" name="operator" value="%" />
</td>
<td>
<input id="btnCE" type="button" name="operator" value="CE" onclick="ce()" />
</td>
</tr>
<tr>
<td>
<input id="btnRad" type="button" name="operator" value="rad" />
</td>
<td>
<input id="btnDeg" type="button" name="operator" value="deg" />
</td>
<td>
<input id="btnFact" type="button" name="operator" value="x!" />
</td>
<td>
<input id="btn7" type="button" value="7" onclick="set('7')" />
</td>
<td>
<input id="btn8" type="button" value="8" onclick="set('8')" />
</td>
<td>
<input id="btn9" type="button" value="9" onclick="set('9')" />
</td>
<td>
<input id="btnDiv" type="button" name="operator" value="÷" onclick="set('/')" />
</td>
</tr>
<tr>
<td>
<input id="btnSineInv" type="button" name="operator" value="asin" onclick="asine()" />
</td>
<td>
<input id="btnSine" type="button" name="operator" value="sin" onclick="sine()" />
</td>
<td>
<input id="btnLN" type="button" name="operator" value="ln" />
</td>
<td>
<input id="btn4" type="button" value="4" onclick="set('4')" />
</td>
<td>
<input id="btn5" type="button" value="5" onclick="set('5')" />
</td>
<td>
<input id="btn6" type="button" value="6" onclick="set('6')" />
</td>
<td>
<input id="btnMul" type="button" name="operator" value="×" onclick="set('*')" />
</td>
</tr>
<tr>
<td>
<input id="btnCosInv" type="button" name="operator" value="acos" onclick="acosine()" />
</td>
<td>
<input id="btnCos" type="button" name="operator" value="cos" onclick="cosine()" />
</td>
<td>
<input id="btnLog" type="button" name="operator" value="log" onclick="fLog()" />
</td>
<td>
<input id="btn1" type="button" value="1" onclick="set('1')" />
</td>
<td>
<input id="btn2" type="button" value="2" onclick="set('2')" />
</td>
<td>
<input id="btn3" type="button" value="3" onclick="set('3')" />
</td>
<td>
<input id="btnSub" type="button" name="operator" value="-" onclick="set('-')" />
</td>
</tr>
<tr>
<td>
<input id="btnTanInv" type="button" name="operator" value="atan" onclick="atangent()" />
</td>
<td>
<input id="btnTan" type="button" name="operator" value="tan" onclick="tangent()" />
</td>
<td>
<input id="btnSqrt" type="button" name="operator" value="√" onclick="sqrRoot()" />
</td>
<td>
<input id="btn0" type="button" value="0" onclick="set('0')" />
</td>
<td>
<input id="btnPeriod" type="button" value="." />
</td>
<td>
<input id="btnEqual" type="button" name="equal" value="=" onclick="answer()" />
</td>
<td>
<input id="btnAdd" type="button" name="operator" value="+" onclick="set('+')" />
</td>
</table>
<script src="js/index.js"></script>
</body>
</html>table {
width: 50%;
height: 300px;
border-collapse: collapse;
font-family: arial, sans-serif;
}
td {
padding: 5px;
text-align: center;
}
input[type=text] {
width: 100%;
height: 50px;
text-align: right;
font-family: monospace;
font-size: 3em;
font-weight: bold;
border-color: gray;
border-width: 1px;
border-style: solid;
opacity: 0.5;
}
input[type=text]:hover {
opacity: 1;
}
input[type=button] {
opacity: 0.8;
background-color: #f5f5f5;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid #dedede;
color: #444;
height: 45px;
width: 65px;
text-align: center;
font-size: 1.2em;
font-weight: normal;
}
input[type=button]:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
opacity: 1;
border: 1px solid #c6c6c6;
color: #222;
cursor: pointer;
}
input[name=equal] {
background-color: #4d90fe;
background-image: linear-gradient(top, #4d90fe, #4787ed);
border: 1px solid #3079ed;
color: #fefefe;
}
input[name=equal]:hover {
background-color: #4d90fe;
background-image: linear-gradient(top, #4d90fe, #357ae8);
border: 1px solid #2f5bb7;
color: #fefefe;
}
input[name=operator] {
border: 1px solid #c6c6c6;
background-color: #d6d6d6;
}function set(op) {
document.getElementById("display").value += op;
}
function sqrRoot() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.sqrt(tempStore));
}
function asine() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.asin(tempStore));
}
function acosine() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.acos(tempStore));
}
function fLog() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.log(tempStore));
}
function atangent() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.atan(tempStore));
}
function tangent() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.tan(tempStore));
}
function cosine() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.cos(tempStore));
}
function sine() {
var tempStore = document.getElementById("display").value;
document.getElementById("display").value = eval(Math.sin(tempStore));
}
function setOp() {
alert("gf");
//document.getElementById("display").value += op;
}
function answer() {
var Exp = document.getElementById("display");
var Exp1 = Exp.value;
var result = eval(Exp1);
//alert(result);
Exp.value = result;
}
function ce() {
var elem = document.getElementById("display").value;
var length = elem.length;
length--;
var a = elem.substr(0, length);
// document.getElementById("display").value="";
//for(var i=0;i<length-1;i++)
//{
document.getElementById("display").value = a;
// }
//alert(length);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.