-
Notifications
You must be signed in to change notification settings - Fork 0
/
standard_calculator.html
101 lines (83 loc) · 5.09 KB
/
standard_calculator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<HEAD>
<title>Aswin's Standard Calculator</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- add icon link -->
<link rel = "icon" href =
"file:///C:/Users/Lenovo/Desktop/html/calculatericon.png"
type = "image/x-icon">
<style>
body {
background-image: url('https://media.istockphoto.com/photos/an-abstract-blue-pattern-with-numbers-picture-id178895760?b=1&k=20&m=178895760&s=170667a&w=0&h=lfh8zl1AloSdEH63b-HQIN4t2zDTtN4oCpANGgwgIpA=');
color:#01311A;
}
h2{
font-size: 50px;
background-color: blueviolet;
color:white;
}
table{
background-color: yellow;
border:1px solid black;
}
button{
background-color:orange;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 130px;
height: 130px;
margin: -76px 0 0 -76px;
}
#myDiv {
display: none;
}
</style>
<script>
function setResultText(valueToSet)
{
let txtBox=document.getElementById('txtResult');
txtBox.value=txtBox.value + valueToSet;
}
function clrResult(valueToSet)
{
let txtBox=document.getElementById('txtResult');
txtBox.value="";
}
function calculateExpression(valueToSet)
{
let txtBox=document.getElementById('txtResult');
txtBox.value=eval(txtBox.value);
}
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
}
</script>
</HEAD>
<body onload="myFunction()">
<h2><center>Aswin's Standard Calculator</center></h2>
<div ID="loader" class="spinner-border text-info"></div>
<div class="mt-4 p-5 bg-light text-white rounded">
<center>
<table name="Calculator">
<th><td colspan="4"><h1 style="color:black">Calculator</h1></td></th>
<tr><td colspan="3"><input id="txtResult" style="font-size:30px; background-color: aquamarine;" type="text"></td></tr>
<tr><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="btn1" value="1" onclick="setResultText(this.value);"></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="btn2" onclick="setResultText(this.value);" value="2"></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="btn3" onclick="setResultText(this.value);" value="3"></td><td><input type="button" value="(" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);"></td></tr>
<tr><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="btn4" value="4" onclick="setResultText(this.value);"></td><td><input type="button" style="background-color:#f5c542; font-size :25px;" id="btn5" onclick="setResultText(this.value);"value="5"></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="btn6" onclick="setResultText(this.value);"value="6"></td><td><input type="button" value=")" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);"></td></tr>
<tr><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="btn7" onclick="setResultText(this.value);"value="7"></td><td><input type="button" style="background-color:#f5c542; font-size:25px;" id="btn8" onclick="setResultText(this.value);"value="8"></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);" value="9"></td><td><input type="button" value="%" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);"></td></tr>
<tr><td><input type="button" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);"value="."></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);"value="0"></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" onclick="setResultText(this.value);" value="+"></td></tr>
<tr><td><input type="button" style="background-color:#f5c542; font-size:25px;" id="multiply" onclick="setResultText(this.value);" value="*"></td><td><input type="button" style="background-color: #f5c542; font-size: 25px;" onclick="setResultText(this.value);"value="-"></td><td><input type="button" style="background-color:#f5c542; font-size: 25px;" id="divide" onclick="setResultText(this.value);" value="/"></td></tr>
<tr><td colspan="2"><input type="button" id="solve" style="background-color:#f5c542; font-size:25px;" onclick="calculateExpression(this.value);" value="="></td><td><input type="button" style="background-color:#f5c542; font-size:25px; font-size: 25px;" id="clr" onclick="clrResult(this.value);" value="clear"></td></tr>
</table>
</center>
</div>
</body>