Skip to content

Commit ce86b2a

Browse files
SahinShaziSahinShazi
committed
update
1 parent 4267490 commit ce86b2a

3 files changed

Lines changed: 146 additions & 36 deletions

File tree

‎Number Count /index.html‎

Lines changed: 15 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,23 @@
11
<!DOCTYPE html>
2-
<html>
3-
2+
<html lang="bn">
43
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>Number Count</title>
8-
</head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<link rel="stylesheet" href="style.css"/>
7+
<title>Number Counter</title>
98

9+
</head>
1010
<body>
11-
12-
<div class="contact">
13-
<label id="countLabel">0</label> <br />
14-
<button id=decreaseBtn>Decrease</button>
15-
<button id=resetBtn>Reset</button>
16-
<button id=increaseBtn>Increase</button>
17-
</div>
11+
<div class="counter-container">
12+
<div class="headline">Simple Counter</div>
13+
<label id="countLabel" aria-live="polite">0</label>
1814

15+
<div class="btn-group">
16+
<button id="decreaseBtn" class="btn btn-decrease" aria-label="Decrease">Decrease</button>
17+
<button id="resetBtn" class="btn btn-reset" aria-label="Reset">Reset</button>
18+
<button id="increaseBtn" class="btn btn-increase" aria-label="Increase">Increase</button>
19+
</div>
20+
</div>
1921
<script src="main.js"></script>
2022
</body>
21-
22-
<style>
23-
#countLabel{
24-
display: block;
25-
text-align: center;
26-
font-size: 100px;
27-
margin-top: 50%;
28-
user-select: none;
29-
color: #391215;
30-
}
31-
.contact{
32-
text-align: center;
33-
margin-top: 50%;
34-
}
35-
.contact button{
36-
padding: 10px;
37-
font-size: 15px;
38-
margin: 6px;
39-
border-radius: 5px
40-
}
41-
</style>
42-
4323
</html>

‎Number Count /main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11

2-
32
let count = 0;
43
document.getElementById("decreaseBtn").onclick = function(){
54
count-=1;

‎Number Count /style.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
6+
}
7+
8+
html,body {
9+
height: 100%;
10+
}
11+
12+
body {
13+
font-family: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
14+
background: linear-gradient(135deg,#0f172a 0%, #0ea5a4 60%);
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
padding: 20px;
19+
color: #071024;
20+
}
21+
22+
.counter-container {
23+
width: 100%;
24+
max-width: 420px;
25+
background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
26+
border-radius: 16px;
27+
padding: 28px;
28+
box-shadow: 0 12px 30px rgba(2,6,23,0.6);
29+
backdrop-filter: blur(8px);
30+
text-align: center;
31+
}
32+
33+
34+
.headline {
35+
font-size: 14px;
36+
color: rgba(255,255,255,0.9);
37+
margin-bottom: 8px;
38+
letter-spacing: 0.4px;
39+
}
40+
41+
42+
#countLabel {
43+
display: block;
44+
user-select: none;
45+
font-weight: 800;
46+
font-size: clamp(48px, 10vw, 120px);
47+
line-height: 1;
48+
color: #ffffff;
49+
text-shadow: 0 8px 24px rgba(2,6,23,0.6);
50+
margin-bottom: 18px;
51+
}
52+
53+
54+
.btn-group {
55+
display: flex;
56+
gap: 12px;
57+
justify-content: center;
58+
flex-wrap: wrap;
59+
}
60+
61+
62+
.btn {
63+
-webkit-tap-highlight-color: transparent;
64+
border: none;
65+
cursor: pointer;
66+
padding: 12px 18px;
67+
border-radius: 12px;
68+
font-weight: 700;
69+
font-size: 15px;
70+
min-width: 100px;
71+
transition: transform .12s ease,
72+
box-shadow .12s ease, opacity .12s ease;
73+
box-shadow: 0 8px 20px rgba(2,6,23,0.35);
74+
}
75+
76+
.btn:active {
77+
transform: translateY(2px) scale(.995); }
78+
79+
.btn-decrease {
80+
background: linear-gradient(135deg,#ff6b6b,#ff4757);
81+
color: #fff;
82+
}
83+
.btn-decrease:hover {
84+
box-shadow: 0 12px 28px rgba(255,71,87,0.2); }
85+
86+
.btn-reset {
87+
background: linear-gradient(135deg,#ffd166,#ffb86b);
88+
color: #071024;
89+
}
90+
.btn-reset:hover {
91+
box-shadow: 0 12px 28px rgba(255,184,107,0.18); }
92+
93+
.btn-increase {
94+
background: linear-gradient(135deg,#7ef9a6,#00c853);
95+
color: #05120a;
96+
}
97+
98+
.btn-increase:hover {
99+
box-shadow: 0 12px 28px rgba(0,200,83,0.18); }
100+
101+
.btn:focus {
102+
outline: 3px solid rgba(255,255,255,0.12);
103+
outline-offset: 3px; }
104+
105+
@media (max-width:480px) {
106+
.counter-container {
107+
padding: 18px;
108+
border-radius: 12px; }
109+
110+
#countLabel {
111+
font-size: clamp(40px, 16vw, 80px);
112+
113+
margin-bottom: 14px; }
114+
.btn {
115+
padding: 10px 12px;
116+
font-size: 14px;
117+
min-width: 86px; }
118+
119+
.btn-group {
120+
gap: 8px; }
121+
}
122+
123+
@media (max-width:360px) {
124+
.btn {
125+
padding: 9px 8px;
126+
font-size: 13px;
127+
min-width: 72px; }
128+
129+
#countLabel {
130+
font-size: clamp(36px, 20vw, 64px); }
131+
}

0 commit comments

Comments
 (0)