Hugging Face's logo

Spaces:
Alexvatti
/
Basic-Calculator
Running

App Files Community
Alexvatti commited on
Commit
e4b70d9
·
verified ·
1 Parent(s): ee58747

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +115 -18
index.html CHANGED
@@ -1,19 +1,116 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
 
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>Basic Calculator</title>
7
+ <style>
8
+ /* Parent Container */
9
+ .parent {
10
+ display: flex;
11
+ justify-content: center; /* Center horizontally */
12
+ align-items: center; /* Center vertically */
13
+ height: 100vh; /* Full height of the screen */
14
+ background-color: lightgray;
15
+ }
16
+
17
+ /* Child Box */
18
+ .container {
19
+ width: 300px;
20
+ height: 450px;
21
+ border: 5px solid black; /* Border */
22
+ background-color: white;
23
+ border-radius: 10px; /* Optional */
24
+ }
25
+ .txt {
26
+ margin: 10px;
27
+ width: 270px;
28
+ height: 50px;
29
+ font-size: 40px;
30
+ text-align: right;
31
+ border: 5px solid rgb(28, 27, 27);
32
+
33
+ }
34
+ .box {
35
+ width: 50px;
36
+ height: 50px;
37
+ margin: 10px;
38
+ font-size: 30px;
39
+ border: 5px ridge rgb(28, 27, 27);
40
+ border-radius: 5px;
41
+
42
+ }
43
+ #op {
44
+ background-color: #e7ef0e;
45
+ }
46
+ #op:hover {
47
+ background-color: aliceblue;
48
+ }
49
+ h1 {
50
+ text-align: center;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body>
55
+ <!-- Parent Div (for positioning) -->
56
+ <div class="parent">
57
+
58
+ <!-- Child Div (the actual content box) -->
59
+ <div class="container">
60
+ <h1> Basic Calculator </h1>
61
+ <input type="text" class="txt" id="display" readonly>
62
+
63
+ <button class="box">7</button>
64
+ <button class="box">8</button>
65
+ <button class="box">9</button>
66
+ <button class="box" id="op">X</button>
67
+
68
+ <button class="box">4</button>
69
+ <button class="box">5</button>
70
+ <button class="box">6</button>
71
+ <button class="box" id="op">-</button>
72
+
73
+ <button class="box">1</button>
74
+ <button class="box">2</button>
75
+ <button class="box">3</button>
76
+ <button class="box" id="op">+</button>
77
+
78
+ <button class="box">0</button>
79
+ <button class="box" id="op">C</button>
80
+ <button class="box" id="op" >/</button>
81
+ <button class="box" id="op">=</button>
82
+
83
+ </div>
84
+ </div>
85
+ <script language="javascript">
86
+ var buttons = document.getElementsByClassName("box");
87
+ var display = document.getElementById("display");
88
+ var currentInput = "";
89
+
90
+ function buttonClick() {
91
+ var value = this.innerText;
92
+
93
+ if (value === "=") {
94
+ try {
95
+ currentInput = eval(currentInput.replace("X", "*"));
96
+ display.value = currentInput;
97
+ } catch (e) {
98
+ display.value = "Error";
99
+ }
100
+ } else if ((value === "C")) {
101
+ currentInput = "";
102
+ display.value = currentInput;
103
+ }
104
+ else {
105
+ currentInput += value;
106
+ display.value = currentInput;
107
+ }
108
+ }
109
+
110
+ for (var i = 0; i < buttons.length; i++) {
111
+ buttons[i].addEventListener("click", buttonClick);
112
+ }
113
+ </script>
114
+ </body>
115
  </html>
116
+