Skip to content

Commit 7cb325c

Browse files
pkprogrammer1pkprogrammer1
authored
Merge pull request #1 from pkprogrammer1/copilot/fix-c82777c6-9624-4a22-b382-d2d394190ac0
Transform calculator UI to modern professional design with glassmorphism effects
2 parents c08378a + a2d93f1 commit 7cb325c

File tree

3 files changed

+184
-103
lines changed

3 files changed

+184
-103
lines changed

‎index.html‎

Lines changed: 18 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,78 +11,24 @@
1111
<div id="calculator">
1212
<input type="text" id='input-box' readonly>
1313
<div id="btn-container">
14-
<button class="extra-btn1" onclick="
15-
currentDisplay ='';
16-
document.querySelector('#input-box').value = currentDisplay;
17-
">C</button>
18-
<button class="extra-btn1" onclick="
19-
currentDisplay =currentDisplay+'/';
20-
document.querySelector('#input-box').value = currentDisplay;
21-
">/</button>
22-
<button class="extra-btn1" onclick="
23-
currentDisplay =currentDisplay+'*';
24-
document.querySelector('#input-box').value = currentDisplay;
25-
">*</button>
26-
<button class="extra-btn1" onclick="
27-
currentDisplay =currentDisplay+'-';
28-
document.querySelector('#input-box').value = currentDisplay;
29-
">-</button>
30-
<button onclick="
31-
currentDisplay =currentDisplay+'7';
32-
document.querySelector('#input-box').value = currentDisplay;
33-
">7</button>
34-
<button onclick="
35-
currentDisplay =currentDisplay+'8';
36-
document.querySelector('#input-box').value = currentDisplay;
37-
">8</button>
38-
<button onclick="
39-
currentDisplay =currentDisplay+'9';
40-
document.querySelector('#input-box').value = currentDisplay;
41-
">9</button>
42-
<button class="extra-btn1" onclick="
43-
currentDisplay =currentDisplay+'+';
44-
document.querySelector('#input-box').value = currentDisplay;
45-
">+</button>
46-
<button onclick="
47-
currentDisplay =currentDisplay+'4';
48-
document.querySelector('#input-box').value = currentDisplay;
49-
">4</button>
50-
<button onclick="
51-
currentDisplay =currentDisplay+'5';
52-
document.querySelector('#input-box').value = currentDisplay;
53-
">5</button>
54-
<button onclick="
55-
currentDisplay =currentDisplay+'6';
56-
document.querySelector('#input-box').value = currentDisplay;
57-
">6</button>
58-
<button class="extra-btn1" onclick="
59-
currentDisplay =currentDisplay+'%';
60-
document.querySelector('#input-box').value = currentDisplay;
61-
">%</button>
62-
<button onclick="
63-
currentDisplay =currentDisplay+'1';
64-
document.querySelector('#input-box').value = currentDisplay;
65-
">1</button>
66-
<button onclick="
67-
currentDisplay =currentDisplay+'2';
68-
document.querySelector('#input-box').value = currentDisplay;
69-
">2</button>
70-
<button onclick="
71-
currentDisplay =currentDisplay+'3';
72-
document.querySelector('#input-box').value = currentDisplay;
73-
">3</button>
74-
<button class="extra-btn1" onclick="
75-
currentDisplay =currentDisplay+'.';
76-
document.querySelector('#input-box').value = currentDisplay;
77-
">.</button>
78-
<button onclick="
79-
currentDisplay =currentDisplay+'0';
80-
document.querySelector('#input-box').value = currentDisplay;
81-
">0</button>
82-
<button class="extra-btn" onclick="
83-
currentDisplay =eval(currentDisplay);
84-
document.querySelector('#input-box').value = currentDisplay;
85-
">=</button>
14+
<button class="extra-btn1" onclick="clearDisplay()">C</button>
15+
<button class="extra-btn1" onclick="appendToDisplay('/')">/</button>
16+
<button class="extra-btn1" onclick="appendToDisplay('*')">*</button>
17+
<button class="extra-btn1" onclick="appendToDisplay('-')">-</button>
18+
<button onclick="appendToDisplay('7')">7</button>
19+
<button onclick="appendToDisplay('8')">8</button>
20+
<button onclick="appendToDisplay('9')">9</button>
21+
<button class="extra-btn1" onclick="appendToDisplay('+')">+</button>
22+
<button onclick="appendToDisplay('4')">4</button>
23+
<button onclick="appendToDisplay('5')">5</button>
24+
<button onclick="appendToDisplay('6')">6</button>
25+
<button class="extra-btn1" onclick="appendToDisplay('%')">%</button>
26+
<button onclick="appendToDisplay('1')">1</button>
27+
<button onclick="appendToDisplay('2')">2</button>
28+
<button onclick="appendToDisplay('3')">3</button>
29+
<button class="extra-btn1" onclick="appendToDisplay('.')">.</button>
30+
<button onclick="appendToDisplay('0')">0</button>
31+
<button class="extra-btn" onclick="calculateResult()">=</button>
8632
</div>
8733
</div>
8834
</div>

‎script.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
11
let currentDisplay = '';
2-
document.querySelector('#input-box').value = currentDisplay;
2+
3+
// Initialize when DOM is loaded
4+
document.addEventListener('DOMContentLoaded', function() {
5+
document.querySelector('#input-box').value = currentDisplay;
6+
});
7+
8+
// Helper functions for calculator operations
9+
function clearDisplay() {
10+
currentDisplay = '';
11+
document.querySelector('#input-box').value = currentDisplay;
12+
}
13+
14+
function appendToDisplay(value) {
15+
currentDisplay += value;
16+
document.querySelector('#input-box').value = currentDisplay;
17+
}
18+
19+
function calculateResult() {
20+
try {
21+
currentDisplay = eval(currentDisplay).toString();
22+
document.querySelector('#input-box').value = currentDisplay;
23+
} catch (error) {
24+
currentDisplay = '';
25+
document.querySelector('#input-box').value = 'Error';
26+
}
27+
}

‎style.css‎

Lines changed: 140 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,159 @@
1-
*{
1+
/* Reset and base styles */
2+
* {
23
padding: 0;
34
margin: 0;
45
box-sizing: border-box;
5-
font-family: 'Roboto';
6+
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
67
}
7-
#main{
8+
9+
body {
10+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11+
min-height: 100vh;
812
display: flex;
913
justify-content: center;
1014
align-items: center;
11-
height: 100vh;
1215
}
13-
#calculator{
14-
width: 300px;
15-
height:430px;
16+
17+
/* Main container */
18+
#main {
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
min-height: 100vh;
23+
padding: 20px;
24+
}
25+
26+
/* Calculator container */
27+
#calculator {
28+
width: 320px;
29+
background: rgba(255, 255, 255, 0.95);
30+
backdrop-filter: blur(10px);
31+
border-radius: 20px;
32+
padding: 20px;
33+
box-shadow:
34+
0 15px 35px rgba(0, 0, 0, 0.1),
35+
0 5px 15px rgba(0, 0, 0, 0.07);
1636
display: flex;
1737
flex-direction: column;
18-
border: 2px solid black;
38+
gap: 20px;
1939
}
20-
button{
21-
width: 60px;
22-
height: 60px;
23-
margin: 3px;
24-
font-size: 24px;
25-
font-weight: 600;
26-
flex-grow: 1;
40+
41+
/* Display area */
42+
#input-box {
43+
width: 100%;
44+
height: 80px;
45+
font-size: 2.5em;
46+
font-weight: 300;
47+
text-align: right;
48+
padding: 0 20px;
2749
border: none;
28-
background-color: rgb(232, 232, 232);
50+
background: #f8f9fa;
51+
border-radius: 15px;
52+
color: #2c3e50;
53+
outline: none;
54+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
55+
}
56+
57+
/* Button container */
58+
#btn-container {
59+
display: grid;
60+
grid-template-columns: repeat(4, 1fr);
61+
gap: 12px;
62+
padding: 0;
2963
}
30-
#btn-container{
64+
65+
/* Base button styles */
66+
button {
67+
height: 60px;
68+
border: none;
69+
border-radius: 15px;
70+
font-size: 1.3em;
71+
font-weight: 500;
72+
cursor: pointer;
73+
transition: all 0.2s ease;
74+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
3175
display: flex;
32-
padding: 10px;
33-
flex-wrap: wrap;
34-
height: 100%;
76+
align-items: center;
77+
justify-content: center;
3578
}
36-
#input-box{
37-
font-size: 38px;
38-
padding: 16px 10px;
39-
outline: none;
79+
80+
/* Number buttons */
81+
button:not(.extra-btn):not(.extra-btn1) {
82+
background: linear-gradient(145deg, #ffffff, #f0f0f0);
83+
color: #2c3e50;
84+
}
85+
86+
button:not(.extra-btn):not(.extra-btn1):hover {
87+
background: linear-gradient(145deg, #f8f9fa, #e9ecef);
88+
transform: translateY(-2px);
89+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
4090
}
41-
.extra-btn{
42-
background-color: maroon;
91+
92+
button:not(.extra-btn):not(.extra-btn1):active {
93+
transform: translateY(0);
94+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
95+
}
96+
97+
/* Operation buttons */
98+
.extra-btn1 {
99+
background: linear-gradient(145deg, #4f46e5, #3730a3);
43100
color: white;
44-
font-size: 30px;
101+
font-size: 1.4em;
102+
}
103+
104+
.extra-btn1:hover {
105+
background: linear-gradient(145deg, #5b52e8, #4338ca);
106+
transform: translateY(-2px);
107+
box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
108+
}
109+
110+
.extra-btn1:active {
111+
transform: translateY(0);
112+
box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
113+
}
114+
115+
/* Equals button */
116+
.extra-btn {
117+
background: linear-gradient(145deg, #f59e0b, #d97706);
118+
color: white;
119+
font-size: 1.5em;
120+
font-weight: 600;
121+
grid-column: span 2;
122+
}
123+
124+
.extra-btn:hover {
125+
background: linear-gradient(145deg, #fbbf24, #f59e0b);
126+
transform: translateY(-2px);
127+
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
128+
}
129+
130+
.extra-btn:active {
131+
transform: translateY(0);
132+
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
45133
}
46-
.extra-btn1{
47-
font-size: 30px;
48-
color: maroon;
134+
135+
/* Responsive design */
136+
@media (max-width: 400px) {
137+
#calculator {
138+
width: 280px;
139+
padding: 15px;
140+
}
141+
142+
#input-box {
143+
height: 70px;
144+
font-size: 2em;
145+
}
146+
147+
button {
148+
height: 50px;
149+
font-size: 1.1em;
150+
}
151+
152+
.extra-btn1 {
153+
font-size: 1.2em;
154+
}
155+
156+
.extra-btn {
157+
font-size: 1.3em;
158+
}
49159
}

0 commit comments

Comments
 (0)