Skip to content

Commit 21ed7a9

Browse files
HuXn-WebDevHuXn-WebDev
committed
Progress Steps Project
1 parent eafedf8 commit 21ed7a9

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎25. Progress Steps/app.js‎

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

‎25. Progress Steps/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Progress Steps</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="progress-container">
12+
<div class="progress" id="progress"></div>
13+
<div class="circle active">1</div>
14+
<div class="circle">2</div>
15+
<div class="circle">3</div>
16+
<div class="circle">4</div>
17+
</div>
18+
<button class="btn" id="prev">Previous</button>
19+
<button class="btn" id="next">Next</button>
20+
</div>
21+
22+
<script src="app.js"></script>
23+
</body>
24+
</html>

‎25. Progress Steps/style.css‎

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

0 commit comments

Comments
 (0)