Skip to content

Commit 5c3247a

Browse files
tajulafreentajulafreen
authored
Merge pull request #2 from tajulafreen/progress-steps
50-Projects-HCJ : Progress steps
2 parents d698582 + f820b6f commit 5c3247a

File tree

4 files changed

+183
-1
lines changed

4 files changed

+183
-1
lines changed

‎ExpandsCards/style.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
* {
22
box-sizing: border-box;
3+
background-color: #2a2828;
34
}
45

56
body {
@@ -9,6 +10,11 @@ body {
910
height: 100vh;
1011
}
1112

13+
h1,
14+
h3 {
15+
color: aliceblue;
16+
}
17+
1218
h1,
1319
.container {
1420
display: flex;
@@ -22,7 +28,7 @@ h1,
2228
}
2329

2430
.panel {
25-
background-size: auto 100%;
31+
background-size: auto;
2632
background-repeat: no-repeat;
2733
background-position: center;
2834
height: 80vh;

‎ProgressSteps/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Progressing Steps</title>
8+
<header>
9+
<h1>Progressing Steps</h1>
10+
</header>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="progress-container">
15+
<div class="progress" id="progress"></div>
16+
<div class="circle active">1</div>
17+
<div class="circle">2</div>
18+
<div class="circle">3</div>
19+
<div class="circle">4</div>
20+
</div>
21+
<div>
22+
<button class="prev" id="prev" disabled>Prev</button>
23+
<button class="next" id="next">Next</button>
24+
</div>
25+
</div>
26+
<script src="script.js"></script>
27+
</body>
28+
</html>

‎ProgressSteps/script.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const progress = document.getElementById('progress');
2+
const prev = document.getElementById('prev');
3+
const next = document.getElementById('next');
4+
const circles = document.querySelectorAll('.circle');
5+
6+
let currentActive = 1;
7+
8+
const update = () => {
9+
circles.forEach((circle, index) => {
10+
if (index < currentActive) {
11+
circle.classList.add('active');
12+
} else {
13+
circle.classList.remove('active');
14+
}
15+
});
16+
const actives = document.querySelectorAll('.active');
17+
progress.style.width = `${
18+
((actives.length - 1) / (circles.length - 1)) * 100
19+
}%`;
20+
21+
if (currentActive === 1) {
22+
prev.disabled = true;
23+
} else if (currentActive === circles.length) {
24+
next.disabled = true;
25+
} else {
26+
prev.disabled = false;
27+
next.disabled = false;
28+
}
29+
};
30+
31+
next.addEventListener('click', () => {
32+
currentActive += 1;
33+
if (currentActive > circles.length) {
34+
currentActive = circles.length;
35+
}
36+
update();
37+
});
38+
39+
prev.addEventListener('click', () => {
40+
currentActive -= 1;
41+
if (currentActive < 1) {
42+
currentActive = 1;
43+
}
44+
update();
45+
});

‎ProgressSteps/style.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
:root {
2+
--line-border-filler: #3498db;
3+
--line-border-empty: #e0e0e0;
4+
}
5+
6+
* {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
background-color: #fff;
12+
font-family: Georgia, 'Times New Roman', Times, serif;
13+
margin: 0;
14+
overflow: hidden;
15+
height: 100vh;
16+
padding: 20px;
17+
}
18+
19+
h1 {
20+
text-align: center;
21+
}
22+
23+
.container {
24+
display: flex;
25+
flex-direction: column;
26+
align-items: center;
27+
margin-top: 15%;
28+
}
29+
30+
.progress-container {
31+
display: flex;
32+
justify-content: space-between;
33+
position: relative;
34+
margin-bottom: 30px;
35+
max-width: 100%;
36+
width: 350px;
37+
}
38+
39+
.progress-container::before {
40+
content: '';
41+
background-color: var(--line-border-empty);
42+
position: absolute;
43+
top: 50%;
44+
left: 0;
45+
height: 4px;
46+
width: 100%;
47+
z-index: -1;
48+
transform: translateY(-50%);
49+
}
50+
51+
.progress {
52+
background-color: var(--line-border-filler);
53+
position: absolute;
54+
top: 50%;
55+
left: 0;
56+
height: 4px;
57+
width: 0;
58+
z-index: -1;
59+
transform: translateY(-50%);
60+
transition: 0.4s ease;
61+
}
62+
63+
.circle {
64+
background-color: #fff;
65+
color: #999;
66+
border-radius: 50%;
67+
height: 30px;
68+
width: 30px;
69+
display: flex;
70+
align-items: center;
71+
justify-content: center;
72+
border: 3px solid var(--line-border-empty);
73+
transition: 0.4s ease;
74+
}
75+
76+
.circle.active {
77+
border-color: var(--line-border-filler);
78+
}
79+
80+
button {
81+
background-color: var(--line-border-filler);
82+
color: #fff;
83+
border: 0;
84+
border-radius: 6px;
85+
cursor: pointer;
86+
font-family: inherit;
87+
padding: 8px 30px;
88+
margin: 5px;
89+
font-size: 14px;
90+
}
91+
92+
button:active {
93+
transform: scale(0.98);
94+
}
95+
96+
button:focus {
97+
outline: 0;
98+
}
99+
100+
button:disabled {
101+
background-color: var(--line-border-empty);
102+
cursor: not-allowed;
103+
}

0 commit comments

Comments
 (0)