Skip to content

Commit f616b67

Browse files
MDJAminMDJAmin
committed
add some style
1 parent 29e1b71 commit f616b67

File tree

2 files changed

+124
-12
lines changed

2 files changed

+124
-12
lines changed

‎css/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
:root{
7+
--primaryClr:#33ff00;
8+
--secondaryClr:#00b545;
9+
--thirdClr:#393E46;
10+
--txtClr:#222831;
11+
}
12+
body{
13+
background-color: black;
14+
}
15+
.calculator{
16+
width: 400px;
17+
margin: 80px auto;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
background-color: var(--thirdClr);
22+
height: 500px;
23+
border-radius: 20px;
24+
padding: 3%;
25+
gap: 5%;
26+
}
27+
.calculator .screen{
28+
width: 100%;
29+
height: 18%;
30+
background-color: var(--primaryClr);
31+
border-radius: 5px;
32+
color: var(--txtClr);
33+
padding: 0 5%;
34+
}
35+
.screen #screen-txt{
36+
width: 100%;
37+
height: 100%;
38+
display: flex;
39+
align-items: center;
40+
font-size: 28px;
41+
overflow: hidden;
42+
font-weight: 600;
43+
font-family: 'Courier New', Courier, monospace;
44+
}
45+
.keys{
46+
width: 100%;
47+
display: flex;
48+
gap:5px;
49+
flex-wrap: wrap;
50+
align-items: center;
51+
justify-content: center;
52+
}
53+
.calculator button{
54+
width:6rem;
55+
height: 3.2rem;
56+
border-radius: 5px;
57+
border: none;
58+
outline: none;
59+
background-color: var(--secondaryClr);
60+
color: var(--txtClr);
61+
font-size: 24px;
62+
font-weight: 600;
63+
cursor: pointer;
64+
font-family: 'Courier New', Courier, monospace;
65+
}
66+
/* .calculator i{
67+
color: var(--txtClr);
68+
font-size: 24px;
69+
font-weight: 600;
70+
} */
71+
/* #point{
72+
position: relative;
73+
}
74+
#point::after{
75+
position: absolute;
76+
font-family: "font awesome 5 free";
77+
content: "\2e";
78+
font-size: 50px;
79+
top: -30%;
80+
left: 0;
81+
transform: translateX(40px);
82+
} */
83+
.btn-opacity{
84+
opacity: .5;
85+
}

‎index.html‎

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,44 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
56
<link
6-
rel="stylesheet"
7-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
8-
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
9-
crossorigin="anonymous"
10-
referrerpolicy="no-referrer"
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
9+
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
10+
crossorigin="anonymous"
11+
referrerpolicy="no-referrer"
1112
/>
12-
<title>Title</title>
13-
</head>
14-
<body>
13+
<link rel="stylesheet" href="css/style.css">
14+
<title>Calculator</title>
15+
</head>
16+
<body>
17+
<section class="calculator">
18+
<div class="screen">
19+
<p id="screen-txt"></p>
20+
</div>
21+
<div class="keys">
22+
<button class="num" id="1">1</button>
23+
<button class="num" id="2">2</button>
24+
<button class="num" id="3">3</button>
25+
<button class="num" id="4">4</button>
26+
<button class="num" id="5">5</button>
27+
<button class="num" id="6">6</button>
28+
<button class="num" id="7">7</button>
29+
<button class="num" id="8">8</button>
30+
<button class="num" id="9">9</button>
31+
<button class="num" id="0">0</button>
32+
<button id="plus">+</button>
33+
<button id="minus">-</button>
34+
<button id="Multiply">*</button>
35+
<button id="divide">/</button>
36+
<button id="point">.</button>
37+
<button id="equal">=</button>
38+
<button id="clear">Clear</button>
39+
</div>
40+
</section>
1541

16-
</body>
17-
</html>
42+
<script src="js/script.js"></script>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)