<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body{
padding:0;
margin:0;
background-image: radial-gradient(circle, #20242a, #15252a, #0c2524, #0f2419, #1a2109);
}
.cal{
width:350px;
height:450px;
background-image: linear-gradient(to bottom, #282d34, #1c272b, #13201f, #0e1813, #0b0f01);
left:2%;
top:5%;
border-radius:20px;
position:absolute ;
overflow:hidden ;
text-align:center;
box-shadow:0px 5px 3px white;
}
#eql{
width:100px;
height:40px;
left:0%;
position:relative;
background-image: radial-gradient(circle, #afe3af, #94e191, #77df71, #57dc4d, #25d814);
margin:10px;
font-size:27px;
border-radius:8px;
box-shadow:2px 3px 0px 0px #7BF495;
font-weight:bold;
outline:none ;
}
.sign{
background-image: radial-gradient(circle, #ffcaef, #fca8e3, #f784d7, #f25cca, #eb19bd);
box-shadow:2px 3px 0px 0px #EB19BD;
font-size:20px;
}
.sin{
background-image: radial-gradient(circle, #ffe6ca, #fbca9a, #f6ad6d, #f18e43, #eb6b19);
box-shadow:2px 3px 0px 0px #EB6B19;
font-size:18px;
}
.log{
background-image: radial-gradient(circle, #cfcaff, #b1b0fa, #8f98f5, #6681f0, #196beb);
box-shadow:2px 3px 0px 0px #196BEB;
font-size:18px;
}
#allClear{
width:100px;
height:40px;
background-image: radial-gradient(circle, #f49ca4, #f27f85, #ed6265, #e54142, #d8141c);
font-size:27px;
border-radius:8px;
box-shadow:2px 3px 0px 0px #F47B7B;
}
#clear{
background-image: radial-gradient(circle, #f49ca4, #f27f85, #ed6265, #e54142, #d8141c);
box-shadow:2px 3px 0px 0px #F47B7B;
font-size:20px;
}
#display{
border:3px solid orange;
background-color:black;
color:white;
font-size:20px;
height:50px;
width:auto;
position:relative;
margin:30px;
text-align:right;
font-weight:bold;
outline:none ;
}
.x{
background-image: radial-gradient(circle, #e9c1e7, #e9a1e8, #e67eea, #e156eb, #d909ed);
font-size:18px;
box-shadow:2px 3px 0px 0px #E457F2;
}
.br{
background-image: radial-gradient(circle, #e5f8c3, #d9f7a1, #cbf67e, #bef455, #aff216);
box-shadow:2px 3px 0px 0px #C1F250;
font-size:18px;
}
.num{
font-size:17px;
box-shadow:2px 3px 0px 0px gray;
font-weight:bold;
border-color:orange;
background-image: radial-gradient(circle, #e3f9f7, #c5f3f2, #a4ecf0, #7ee5f1, #49def4);
}
.operator{
font-size:25px;
box-shadow:2px 1px 0px 0px #F4F449;
background-image: radial-gradient(circle, #ebe49a, #eee681, #f1e866, #f4ea46, #f6ec0c);
}
input[type="button"]{
width:50px;
height:30px;
margin:4px;
border-radius:7px;
position:relative;
text-align:center;
font-weight:bold;
outline:none ;
left:5%;
}
footer{
color:white;
top:95%;
position:absolute;
left:10%;
}
</style>
</head>
<form name="calculator" class="cal">
<table>
<tr>
<td colspan="5">
<input type="text" name="display" id="display" disabled >
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" id="allClear" name="clear" value="AC" onclick="calculator.display.value = '0'">
</td>
<td>
<input type="button" id="clear" name="bbr" value="C" onclick="deleteChar(calculator.display)">
</td>
<td>
<input type="button" class="sign" name="sign" value="±" onclick="changeSign(calculator.display)">
</td>
<td>
<input type="button" class="sign" name="pi" value=π onclick="calculator.display.value += 3.14159265359">
</td>
</tr>
<tr>
<td>
<input type="button" class="x" name="doit" value=x² onclick="calculator.display.value = (eval(calculator.display.value)*eval(calculator.display.value))">
</td>
<td>
<input type="button" class="x" name="doit" value="x³" onclick="calculator.display.value = (eval(calculator.display.value)*eval(calculator.display.value)*eval(calculator.display.value))">
</td> <td>
<input type="button" class="x" name="root" value=√ onclick="calculator.display.value = Math.sqrt(calculator.display.value)">
</td> <td>
<input type="button" class="x" id="factorial" name="factorial" value="x!" onclick="fact(calculator.display.value) ">
</td>
<td>
<input type="button" class="x" name="exp" value="e^x" onclick="calculator.display.value=Math.exp(calculator.display.value)">
<td>
</tr>
<tr>
<td>
<input type="button" class="log" name="ln" value=ln onclick="calculator.display.value = Math.log(calculator.display.value)">
</td>
<td>
<input type="button" class="log" name="log" value=log onclick="calculator.display.value = Math.log10(calculator.display.value)">
</td>
<td>
<input type="button" class="sin" name="sin" value="sin" onclick="calculator.display.value = Math.sin(calculator.display.value)">
</td>
<td>
<input type="button" class="sin" name="cos" value="cos" onclick="calculator.display.value = Math.cos(calculator.display.value)">
</td>
<td>
<input type="button" class="sin" name="tan" value="tan" onclick="calculator.display.value = Math.tan(calculator.display.value)">
</td>
</tr>
<tr>
<td><input type="button" class="num" name="seven" value="7" onclick="calculator.display.value += '7'"></td>
<td><input type="button" class="num" name="eight" value="8" onclick="calculator.display.value += '8'"></td>
<td><input type="button" class="num" name="nine" value="9" onclick="calculator.display.value += '9'"></td>
<td><input type="button" class="operator" name="plus" value="+" onclick="calculator.display.value += '+'"></td>
<td><input type="button" class="operator" name="mul" value="*" onclick="calculator.display.value += '*'"></td>
</tr>
<tr>
<td><input type="button" class="num" name="fore" value="4" onclick="calculator.display.value += '4'"></td>
<td><input type="button" class="num" name="five" value="5" onclick="calculator.display.value += '5'"></td>
<td><input type="button" class="num" name="six" value="6" onclick="calculator.display.value += '6'"></td>
<td><input type="button" class="operator" name="sub" value="-" onclick="calculator.display.value += '-'"></td>
<td><input type="button" class="operator" name="div" value="/" onclick="calculator.display.value += '/'"></td>
</tr>
<tr>
<td><input type="button" class="num"name="one" value="1" onclick="calculator.display.value += '1'"></td>
<td><input type="button"class="num" name="two" value="2" onclick="calculator.display.value += '2'"></td>
<td><input type="button" class="num" name="three" value="3" onclick="calculator.display.value += '3'"></td>
<td><input type="button" class="operator" name="dot" value="." onclick="calculator.display.value += '.'"></td>
<td><input type="button" class="operator" name="modulo" value="%" onclick="calculator.display.value += '%'"></td>
</tr>
<tr>
<td><input type="button" class="num" name="zero" value="0" onclick="calculator.display.value += '0'"></td>
<td>
<input type="button" class="br" name="fbr" value="(" onclick="calculator.display.value += '('">
</td>
<td>
<input type="button" class="br" name="bbr" value=")" onclick="calculator.display.value += ')'">
</td>
<td colspan="2">
<input type="button" id="eql" name="doit" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
</td>
</tr>
</table>
</form>
<footer>
<i class="fa fa-copyright">created by Siddikur Rahman Rayhan</i>
</footer>
<script>
alert ("Enjoy your day with my code😀 if you like my code give upvote for it 🌼🌹")
function fact(x) {
if(x == 0) {
return 1;
}
if(x < 0 ) {
return undefined;
}
for(var i = x; --i; ) {
x *= i;
}
calculator.display.value=x;
}
function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}
function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
</script>
</body>
</html>