Hugging Face's logo

Spaces:
Swathi6
/
Manipulation
No application file

App Files Community
Swathi6 commited on
Commit
92d30b4
·
verified ·
1 Parent(s): dad3afe

Create calculator.html

Browse files
Files changed (1) hide show
  1. calculator.html +115 -0
calculator.html ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calculator</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ justify-content: center;
12
+ align-items: center;
13
+ height: 100vh;
14
+ margin: 0;
15
+ background-color: #f4f4f9;
16
+ }
17
+ .calculator {
18
+ background-color: #fff;
19
+ padding: 20px;
20
+ border-radius: 10px;
21
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
+ }
23
+ .display {
24
+ width: 100%;
25
+ height: 50px;
26
+ margin-bottom: 20px;
27
+ background-color: #222;
28
+ color: white;
29
+ font-size: 2rem;
30
+ text-align: right;
31
+ padding: 10px;
32
+ border-radius: 5px;
33
+ border: none;
34
+ }
35
+ .buttons {
36
+ display: grid;
37
+ grid-template-columns: repeat(4, 1fr);
38
+ gap: 10px;
39
+ }
40
+ .buttons button {
41
+ padding: 20px;
42
+ font-size: 1.5rem;
43
+ border-radius: 5px;
44
+ background-color: #f0f0f0;
45
+ border: 1px solid #ddd;
46
+ cursor: pointer;
47
+ }
48
+ .buttons button:hover {
49
+ background-color: #d0d0d0;
50
+ }
51
+ .buttons button:active {
52
+ background-color: #b0b0b0;
53
+ }
54
+ .equal {
55
+ background-color: #4CAF50;
56
+ color: white;
57
+ }
58
+ .clear {
59
+ background-color: #f44336;
60
+ color: white;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+
66
+ <div class="calculator">
67
+ <input type="text" class="display" id="display" disabled>
68
+ <div class="buttons">
69
+ <button onclick="appendToDisplay('7')">7</button>
70
+ <button onclick="appendToDisplay('8')">8</button>
71
+ <button onclick="appendToDisplay('9')">9</button>
72
+ <button onclick="appendToDisplay('+')">+</button>
73
+
74
+ <button onclick="appendToDisplay('4')">4</button>
75
+ <button onclick="appendToDisplay('5')">5</button>
76
+ <button onclick="appendToDisplay('6')">6</button>
77
+ <button onclick="appendToDisplay('-')">-</button>
78
+
79
+ <button onclick="appendToDisplay('1')">1</button>
80
+ <button onclick="appendToDisplay('2')">2</button>
81
+ <button onclick="appendToDisplay('3')">3</button>
82
+ <button onclick="appendToDisplay('*')">*</button>
83
+
84
+ <button onclick="appendToDisplay('0')">0</button>
85
+ <button onclick="appendToDisplay('.')">.</button>
86
+ <button onclick="clearDisplay()" class="clear">C</button>
87
+ <button onclick="appendToDisplay('/')">/</button>
88
+ </div>
89
+ <button onclick="calculateResult()" class="equal">=</button>
90
+ </div>
91
+
92
+ <script>
93
+ // Function to append the clicked button value to the display
94
+ function appendToDisplay(value) {
95
+ document.getElementById('display').value += value;
96
+ }
97
+
98
+ // Function to clear the display
99
+ function clearDisplay() {
100
+ document.getElementById('display').value = '';
101
+ }
102
+
103
+ // Function to calculate the result of the expression in the display
104
+ function calculateResult() {
105
+ try {
106
+ let result = eval(document.getElementById('display').value);
107
+ document.getElementById('display').value = result;
108
+ } catch (error) {
109
+ document.getElementById('display').value = 'Error';
110
+ }
111
+ }
112
+ </script>
113
+
114
+ </body>
115
+ </html>