-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (87 loc) · 5.93 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="backwrap gradient">
<div class="back-shapes">
<!-- All this img tags was autogenerated by custom written js tool -->
<span class="floating circle" style="top:66.59856996935649%;left:13.020833333333334%;animation-delay:-0.9s;"></span>
<span class="floating triangle" style="top:31.46067415730337%;left:33.59375%;animation-delay:-4.8s;"></span>
<span class="floating cross" style="top:76.50663942798774%;left:38.020833333333336%;animation-delay:-4s;"></span>
<span class="floating square" style="top:21.450459652706844%;left:14.0625%;animation-delay:-2.8s;"></span>
<span class="floating square" style="top:58.12053115423902%;left:56.770833333333336%;animation-delay:-2.15s;"></span>
<span class="floating square" style="top:8.682328907048008%;left:72.70833333333333%;animation-delay:-1.9s;"></span>
<span class="floating cross" style="top:31.3585291113381%;left:58.541666666666664%;animation-delay:-0.65s;"></span>
<span class="floating cross" style="top:69.96935648621042%;left:81.45833333333333%;animation-delay:-0.4s;"></span>
<span class="floating circle" style="top:15.117466802860061%;left:32.34375%;animation-delay:-4.1s;"></span>
<span class="floating circle" style="top:13.074565883554648%;left:45.989583333333336%;animation-delay:-3.65s;"></span>
<span class="floating cross" style="top:55.87334014300306%;left:27.135416666666668%;animation-delay:-2.25s;"></span>
<span class="floating cross" style="top:49.54034729315628%;left:53.75%;animation-delay:-2s;"></span>
<span class="floating cross" style="top:34.62717058222676%;left:49.635416666666664%;animation-delay:-1.55s;"></span>
<span class="floating cross" style="top:33.19713993871297%;left:86.14583333333333%;animation-delay:-0.95s;"></span>
<span class="floating square" style="top:28.19203268641471%;left:25.208333333333332%;animation-delay:-4.45s;"></span>
<span class="floating circle" style="top:39.7344228804903%;left:10.833333333333334%;animation-delay:-3.35s;"></span>
<span class="floating triangle" style="top:77.83452502553627%;left:24.427083333333332%;animation-delay:-2.3s;"></span>
<span class="floating triangle" style="top:2.860061287027579%;left:47.864583333333336%;animation-delay:-1.75s;"></span>
<span class="floating triangle" style="top:71.3993871297242%;left:66.45833333333333%;animation-delay:-1.25s;"></span>
<span class="floating triangle" style="top:31.256384065372828%;left:76.92708333333333%;animation-delay:-0.65s;"></span>
<span class="floating triangle" style="top:46.47599591419816%;left:38.90625%;animation-delay:-0.35s;"></span>
<span class="floating cross" style="top:3.4729315628192032%;left:19.635416666666668%;animation-delay:-4.3s;"></span>
<span class="floating cross" style="top:3.575076608784474%;left:6.25%;animation-delay:-4.05s;"></span>
<span class="floating cross" style="top:77.3237997957099%;left:4.583333333333333%;animation-delay:-3.75s;"></span>
<span class="floating cross" style="top:0.9193054136874361%;left:71.14583333333333%;animation-delay:-3.3s;"></span>
<span class="floating square" style="top:23.6976506639428%;left:63.28125%;animation-delay:-2.1s;"></span>
<span class="floating square" style="top:81.30745658835546%;left:45.15625%;animation-delay:-1.75s;"></span>
<span class="floating square" style="top:60.9805924412666%;left:42.239583333333336%;animation-delay:-1.45s;"></span>
<span class="floating square" style="top:29.009193054136876%;left:93.90625%;animation-delay:-1.05s;"></span>
<span class="floating square" style="top:52.093973442288046%;left:68.90625%;animation-delay:-0.7s;"></span>
<span class="floating square" style="top:81.51174668028601%;left:83.59375%;animation-delay:-0.35s;"></span>
<span class="floating square" style="top:11.542390194075587%;left:91.51041666666667%;animation-delay:-0.1s;"></span>
<div class="container">
<div class="Calculator">
<form >
<div class="display">
<input type="text" name="display" id="result" readonly>
</div>
<div>
<input type="button" value="AC" onclick="clearResult()">
<input type="button" value="DE" onclick="display.value =display.value.toString().slice(0,-1)">
<input type="button" value="." onclick="display.value+='.'" >
<input type="button" value="/" onclick="display.value+='/'" class="dot">
</div>
<div>
<input type="button" value="7" onclick="display.value+=7">
<input type="button" value="8" onclick="display.value+=8">
<input type="button" value="9" onclick="display.value+=9">
<input type="button" value="*" onclick="display.value+='*'" class="dot">
</div>
<div>
<input type="button" value="4" onclick="display.value+=4">
<input type="button" value="5" onclick="display.value+=5">
<input type="button" value="6" onclick="display.value+=6">
<input type="button" value="-" onclick="display.value+= '-'" class="dot">
</div>
<div>
<input type="button" value="1"onclick="display.value+=1">
<input type="button" value="2"onclick="display.value+=2">
<input type="button" value="3" onclick="display.value+=3">
<input type="button" value="+"onclick="display.value+= '+'" class="dot">
</div>
<div>
<input type="button" value="00"onclick="display.value+='00'">
<input type="button" value="0"onclick="display.value+=0">
<input type="button" value="=" class="equal" onclick="calculateResult()">
</div>
</form>
</div>
<script src="./index.js" charset="utf-8"></script>
</div>
</div>
</div>
</body>
</html>