Skip to content

Commit ada062b

Browse files
thinkswellthinkswell
authored
Merge pull request #643 from rituraj12797/master
fix:#626 Added the the keypress feature and updated the UI
2 parents f1dd3b9 + 69e9af8 commit ada062b

File tree

3 files changed

+271
-104
lines changed

3 files changed

+271
-104
lines changed

‎Calculator/sushil-2803/index.html‎

Lines changed: 28 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,37 @@
22
<html>
33

44
<head>
5-
<link rel='stylesheet' type='text/css' href="style.css">
6-
<title>Calculator</title>
5+
<link rel='stylesheet' type='text/css' href="./style.css">
6+
<title>Calculator</title>
77
</head>
8-
8+
99

1010
<body>
11-
<div class="calculator">
12-
<div class="input" id="input"></div>
13-
<div class="buttons">
14-
<div class="operators">
15-
<div>+</div>
16-
<div>-</div>
17-
<div>&times;</div>
18-
<div>&divide;</div>
19-
</div>
20-
<div class="leftPanel">
21-
<div class="numbers">
22-
<div>7</div>
23-
<div>8</div>
24-
<div>9</div>
25-
</div>
26-
<div class="numbers">
27-
<div>4</div>
28-
<div>5</div>
29-
<div>6</div>
30-
</div>
31-
<div class="numbers">
32-
<div>1</div>
33-
<div>2</div>
34-
<div>3</div>
35-
</div>
36-
<div class="numbers">
37-
<div>0</div>
38-
<div>.</div>
39-
<div id="clear">C</div>
40-
</div>
11+
<div class="calculator">
12+
<div class="input" id="input"></div>
13+
<div class="buttons">
14+
15+
<div class="o1 o">+</div>
16+
<div class="o2 o">-</div>
17+
<div class="multiply_sign o3 o">&times;</div>
18+
<div class="o4 o">&divide;</div>
19+
<div class="n7 n">7</div>
20+
<div class="n8 n">8</div>
21+
<div class="n9 n">9</div>
22+
<div class="n4 n">4</div>
23+
<div class="n5 n">5</div>
24+
<div class="n6 n">6</div>
25+
<div class="n1 n">1</div>
26+
<div class="n2 n">2</div>
27+
<div class="n3 n">3</div>
28+
<div class="n11 n">0</div>
29+
<div class="n10 g n">.</div>
30+
<div id="clear" class="n12 n g">C</div>
31+
<div class="equal eq" id="result">=</div>
4132
</div>
42-
<div class="equal" id="result">=</div>
4333
</div>
44-
</div>
45-
<script src="use.js"></script>
34+
</div>
35+
<script src="use.js"></script>
4636
</body>
47-
</html>
37+
38+
</html>

‎Calculator/sushil-2803/style.css‎

Lines changed: 133 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
16
body {
2-
width: 500px;
3-
margin: 4% auto;
7+
height: 800px;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
overflow-y: hidden;
12+
width: 100%;
413
font-family: 'Source Sans Pro', sans-serif;
514
letter-spacing: 5px;
615
font-size: 1.8rem;
@@ -10,16 +19,29 @@ body {
1019
}
1120

1221
.calculator {
13-
padding: 20px;
14-
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
15-
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
16-
border-radius: 1px;
22+
border-radius: 2rem;
23+
background-color: rgb(225, 225, 255);
24+
height: 80%;
25+
width: min(400px,95%);
26+
display: flex;
27+
justify-content:center;
28+
align-items: center;
29+
box-shadow: rgb(38, 57, 77) 0rem 1rem 1.5rem -0.5rem;
30+
flex-direction: column;
31+
32+
/* padding: 20px; */
33+
34+
1735
}
1836

1937
.input {
38+
width: 90%;
39+
height: 35%;
40+
border-radius: 1.5rem;
41+
background-color: white;
2042
border: 1px solid #ddd;
21-
border-radius: 1px;
22-
height: 60px;
43+
44+
2345
padding-right: 15px;
2446
padding-top: 10px;
2547
text-align: right;
@@ -35,7 +57,99 @@ body {
3557
box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
3658
}
3759

38-
.buttons {}
60+
.buttons {
61+
height: 60%;
62+
width: 90%;
63+
display: grid;
64+
grid-template-rows:repeat(5,1fr);
65+
grid-template-columns: repeat(4,1fr);
66+
justify-content: space-around;
67+
align-items: center;
68+
grid-template-areas:
69+
"o1 o2 o3 o4"
70+
"n1 n2 n3 eq"
71+
"n4 n5 n6 eq"
72+
"n7 n8 n9 eq"
73+
"n10 n11 n12 eq";
74+
}
75+
.o,.n,.eq,.g{
76+
display: flex;
77+
justify-content: center;
78+
align-items: center;
79+
justify-self: center;
80+
height: 90%;
81+
width: 90%;
82+
font-weight: 600;
83+
border-radius: 1rem;
84+
background-color: white;
85+
align-self: center;
86+
}
87+
.o{
88+
/* height: 100%; */
89+
/* width: 96%; */
90+
background-color: white;
91+
color: #59a800;
92+
93+
/* background-color: #c5d8f6; */
94+
border-radius: 1rem;
95+
96+
97+
}
98+
.g{
99+
color: rgb(249, 165, 19);
100+
}
101+
.o1{
102+
grid-area: o1;
103+
}
104+
.o2{
105+
grid-area: o2;
106+
}
107+
.o3{
108+
grid-area: o3;
109+
}
110+
.o4{
111+
grid-area: o4;
112+
}
113+
.n1{
114+
grid-area: n1;
115+
}
116+
.n2{
117+
grid-area: n2;
118+
}
119+
.n3{
120+
grid-area: n3;
121+
}
122+
.n4{
123+
grid-area: n4;
124+
}
125+
.n5{
126+
grid-area: n5;
127+
}
128+
.n6{
129+
grid-area: n6;
130+
}
131+
.n7{
132+
grid-area: n7;
133+
}
134+
.n8{
135+
grid-area: n8;
136+
}
137+
.n9{
138+
grid-area: n9;
139+
}
140+
.n10{
141+
grid-area: n10;
142+
}
143+
.n11{
144+
grid-area: n11;
145+
}
146+
.n12{
147+
grid-area: n12;
148+
}
149+
.eq{
150+
grid-area: eq;
151+
}
152+
39153

40154
.operators {}
41155

@@ -64,7 +178,8 @@ body {
64178
}
65179

66180
.leftPanel {
67-
display: inline-block;
181+
182+
width: 100%;
68183
}
69184

70185
.numbers div {
@@ -93,26 +208,22 @@ body {
93208

94209
div.equal {
95210
display: inline-block;
96-
border: 1px solid #3079ED;
97-
border-radius: 1px;
98-
width: 17%;
211+
height: 97%;
212+
99213
text-align: center;
100-
padding: 127px 10px;
101-
margin: 10px 6px 10px 0;
102-
vertical-align: top;
214+
display: flex;
215+
justify-content: center;
216+
align-items: center;
103217
cursor: pointer;
104218
color: #FFF;
105-
background-color: #4d90fe;
219+
background-color: #3f45ff;
106220
transition: all .2s ease-in-out;
107221
}
108222

109223
div.equal:hover {
110-
background-color: #307CF9;
111-
-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
112-
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
113-
border-color: #1857BB;
224+
background-color: #242ef6;
114225
}
115226

116227
div.equal:active {
117228
font-weight: bold;
118-
}
229+
}

0 commit comments

Comments
 (0)