Skip to content

Commit aa4a14f

Browse files
ArashZrgArashZrg
committed
progress steps done
1 parent 1c11fd5 commit aa4a14f

File tree

3 files changed

+99
-100
lines changed

3 files changed

+99
-100
lines changed

‎002-progress steps/index.html

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,19 @@
88
</head>
99
<body>
1010
<div class="container">
11-
<div class="progress-container">
12-
<div class="progress" id="progress"></div>
13-
<div class="circle active">1</div>
11+
<div id="circle-container">
12+
<div class="circle active-circle">1</div>
13+
<div class="line"></div>
1414
<div class="circle">2</div>
15+
<div class="line"></div>
1516
<div class="circle">3</div>
17+
<div class="line"></div>
1618
<div class="circle">4</div>
1719
</div>
18-
<button class="btn" id="prev" disabled>Prev</button>
19-
<button class="btn" id="next">Next</button>
20+
<div id="button-container">
21+
<button class="prev btn">Prev</button>
22+
<button class="next btn active-btn">Next</button>
23+
</div>
2024
</div>
2125
<script src="script.js"></script>
2226
</body>

‎002-progress steps/script.js

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
1-
const progress = document.getElementById("progress");
2-
const prev = document.getElementById("prev");
3-
const next = document.getElementById("next");
4-
const circles = document.querySelectorAll(".circle");
1+
"use strict";
52

6-
let currentActive = 1;
3+
// select all elements i need
4+
const circles = document.querySelectorAll(".circle");
5+
const lines = document.querySelectorAll(".line");
6+
const prevBtn = document.querySelector(".prev");
7+
const nextBtn = document.querySelector(".next");
78

8-
next.addEventListener("click", () => {
9-
currentActive++;
10-
if (currentActive > circles.length) currentActive = circles.length;
11-
update();
12-
});
9+
let whichNumber = 0;
1310

14-
prev.addEventListener("click", () => {
15-
currentActive--;
16-
if (currentActive < 1) currentActive = 1;
17-
update();
11+
// Next Event
12+
nextBtn.addEventListener("click", (e) => {
13+
if (whichNumber < 3) {
14+
whichNumber++;
15+
prevBtn.classList.add("active-btn");
16+
circles[whichNumber].classList.add("active-circle");
17+
lines[whichNumber - 1].classList.add("active-line");
18+
}
19+
if (whichNumber == 3) {
20+
nextBtn.classList.remove("active-btn");
21+
return;
22+
}
1823
});
1924

20-
const update = () => {
21-
circles.forEach((circle, index) => {
22-
if (index < currentActive) circle.classList.add("active");
23-
else circle.classList.remove("active");
24-
});
25-
const actives = document.querySelectorAll(".active");
26-
progress.style.width =
27-
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
28-
if (currentActive === 1) prev.disabled = true;
29-
else if (currentActive === circles.length) next.disabled = true;
30-
else {
31-
prev.disabled = false;
32-
next.disabled = false;
25+
// Prev Event
26+
prevBtn.addEventListener("click", (e) => {
27+
if (whichNumber > 0) {
28+
nextBtn.classList.add("active-btn");
29+
circles[whichNumber].classList.remove("active-circle");
30+
lines[whichNumber - 1].classList.remove("active-line");
31+
whichNumber--;
32+
}
33+
if (whichNumber == 0) {
34+
prevBtn.classList.remove("active-btn");
35+
return;
3336
}
34-
};
37+
});

‎002-progress steps/style.css

Lines changed: 59 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,92 @@
11
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
22

3-
:root {
4-
--line-border-fill: #3498db;
5-
--line-border-empty: #e0e0e0;
6-
}
7-
83
* {
4+
margin: 0;
5+
padding: 0;
96
box-sizing: border-box;
107
}
118

129
body {
13-
font-family: "Muli", sans-serif;
14-
background-color: #f6f7fb;
1510
display: flex;
16-
align-items: center;
1711
justify-content: center;
18-
height: 100vh;
19-
overflow: hidden;
20-
margin: 0;
12+
align-items: center;
13+
14+
margin-top: 5rem;
2115
}
2216

17+
2318
.container {
24-
text-align: center;
19+
width: 20rem;
20+
height: 8rem;
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: space-evenly;
24+
align-items: center;
25+
gap: 1.4rem;
26+
2527
}
2628

27-
.progress-container {
29+
30+
/* cicles styles */
31+
#circle-container {
2832
display: flex;
29-
justify-content: space-between;
30-
position: relative;
31-
margin-bottom: 30px;
32-
max-width: 100%;
33-
width: 350px;
33+
justify-content: space-around;
34+
align-items: center;
3435
}
3536

36-
.progress-container::before {
37-
content: ""; /* Mandatory with ::before */
38-
background-color: var(--line-border-empty);
39-
position: absolute;
40-
top: 50%;
41-
left: 0;
42-
transform: translateY(-50%);
43-
height: 4px;
44-
width: 100%;
45-
z-index: -1;
37+
.line {
38+
width: 3rem;
39+
border: solid rgb(224, 213, 213) 2px;
40+
4641
}
4742

48-
.progress {
49-
background-color: var(--line-border-fill);
50-
position: absolute;
51-
top: 50%;
52-
left: 0;
53-
transform: translateY(-50%);
54-
height: 4px;
55-
width: 0%;
56-
z-index: -1;
57-
transition: 0.4s ease;
43+
.active-line {
44+
border-color: blue;
5845
}
5946

6047
.circle {
61-
background-color: #fff;
62-
color: #999;
48+
padding-top: 0.4rem;
49+
text-align: center;
50+
border: solid black 1px;
51+
width: 2rem;
52+
height: 2rem;
6353
border-radius: 50%;
64-
height: 30px;
65-
width: 30px;
66-
display: flex;
67-
align-items: center;
68-
justify-content: center;
69-
border: 3px solid var(--line-border-empty);
70-
transition: 0.4s ease;
54+
color: lightgray;
7155
}
7256

73-
.circle.active {
74-
border-color: var(--line-border-fill);
57+
.active-circle {
58+
background-color: blue;
7559
}
7660

77-
.btn {
78-
background-color: var(--line-border-fill);
79-
color: #fff;
80-
border: 0;
81-
border-radius: 6px;
82-
cursor: pointer;
83-
font-family: inherit;
84-
padding: 8px 30px;
85-
margin: 5px;
86-
font-size: 14px;
87-
}
8861

89-
.btn:active {
90-
transform: scale(0.98);
62+
/* Button styles */
63+
#button-container {
64+
width: 12rem;
65+
height: 3rem;
66+
display: flex;
67+
justify-content: center;
68+
align-items: center;
69+
gap: 2rem;
70+
padding: 1rem;
9171
}
9272

93-
.btn:focus {
94-
outline: 0;
73+
.btn {
74+
text-align: center;
75+
width: 5rem;
76+
height: 2rem;
77+
opacity: 0.9;
78+
border-radius: 0.2rem;
79+
border: none;
80+
color: rgb(70, 59, 59);
9581
}
9682

97-
.btn:disabled {
98-
background-color: var(--line-border-empty);
99-
cursor: not-allowed;
83+
.btn:hover {
84+
opacity: 1;
85+
cursor: pointer;
10086
}
87+
88+
.active-btn {
89+
background-color: blue;
90+
color: white;
91+
opacity: 0.8;
92+
}

0 commit comments

Comments
 (0)