Hugging Face's logo

Spaces:
Alexvatti
/
Basic-Calculator
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +9 -54
index.html CHANGED
@@ -4,52 +4,8 @@
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) -->
@@ -59,26 +15,26 @@
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>
@@ -113,4 +69,3 @@
113
  </script>
114
  </body>
115
  </html>
116
-
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Basic Calculator</title>
7
+ <link rel="stylesheet" href="style.css">
8
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
  <!-- Parent Div (for positioning) -->
 
15
  <div class="container">
16
  <h1> Basic Calculator </h1>
17
  <input type="text" class="txt" id="display" readonly>
18
+ <button class="box" id="op">C</button>
19
  <button class="box">7</button>
20
  <button class="box">8</button>
21
  <button class="box">9</button>
22
+ <button class="box" id="op">/</button>
23
 
24
  <button class="box">4</button>
25
  <button class="box">5</button>
26
  <button class="box">6</button>
27
+ <button class="box" id="op">X</button>
28
 
29
  <button class="box">1</button>
30
  <button class="box">2</button>
31
  <button class="box">3</button>
32
+ <button class="box" id="op">-</button>
33
 
34
  <button class="box">0</button>
35
+ <button class="box">.</button>
36
+ <button class="box" id="op" >=</button>
37
+ <button class="box" id="op">+</button>
38
 
39
  </div>
40
  </div>
 
69
  </script>
70
  </body>
71
  </html>