Skip to content

Commit 27276f2

Browse files
Shreekant-04Shreekant-04
committed
Progress step and star rating added
1 parent 68391ea commit 27276f2

File tree

4 files changed

+227
-1
lines changed

4 files changed

+227
-1
lines changed

‎ProgressStep/app.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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+
next.addEventListener("click", () => {
9+
currentActive++;
10+
11+
if (currentActive > circles.length) {
12+
currentActive = circles.length;
13+
}
14+
15+
update();
16+
});
17+
18+
prev.addEventListener("click", () => {
19+
currentActive--;
20+
21+
if (currentActive < 1) {
22+
currentActive = 1;
23+
}
24+
25+
update();
26+
});
27+
28+
function update() {
29+
circles.forEach((circle, idx) => {
30+
if (idx < currentActive) {
31+
circle.classList.add("active");
32+
} else {
33+
circle.classList.remove("active");
34+
}
35+
});
36+
37+
const actives = document.querySelectorAll(".active");
38+
39+
progress.style.width =
40+
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
41+
42+
if (currentActive === 1) {
43+
prev.disabled = true;
44+
} else if (currentActive === circles.length) {
45+
next.disabled = true;
46+
} else {
47+
prev.disabled = false;
48+
next.disabled = false;
49+
}
50+
}
51+
update();
52+
53+
//star rating
54+
const stars = document.querySelectorAll(".star-wrapper span");
55+
console.log(stars);
56+
let state = false;
57+
stars.forEach((star) => {
58+
console.log(star);
59+
star.addEventListener("click", (e) => {
60+
starcolor(e);
61+
});
62+
});
63+
const wrapper = document.querySelector("star-wrapper");
64+
function starcolor(e) {
65+
let c = 5;
66+
for (let i = 0; i < c; i++) {
67+
stars[i].style.color = "black";
68+
}
69+
let a = e.target.id;
70+
console.log(a);
71+
let b;
72+
switch (a) {
73+
case "star1":
74+
b = 1;
75+
break;
76+
case "star2":
77+
b = 2;
78+
break;
79+
case "star3":
80+
b = 3;
81+
break;
82+
case "star4":
83+
b = 4;
84+
break;
85+
case "star5":
86+
b = 5;
87+
break;
88+
}
89+
console.log(b);
90+
for (let i = 0; i < b; i++) {
91+
stars[i].style.color = "orange";
92+
}
93+
}

‎ProgressStep/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
<title>Progress Bar and star rating</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,1,-50..200" />
11+
</head>
12+
<body>
13+
<section class="wrapper">
14+
<div class="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 class="circle">5</div>
21+
</div>
22+
<button class="btn" id="prev">Prev</button>
23+
<button class="btn" id="next">Next</button>
24+
</section>
25+
<section class="star-wrapper">
26+
<span class="material-symbols-outlined" id="star1"> star </span>
27+
<span class="material-symbols-outlined" id="star2"> star </span>
28+
<span class="material-symbols-outlined" id="star3"> star </span>
29+
<span class="material-symbols-outlined" id="star4"> star </span>
30+
<span class="material-symbols-outlined" id="star5"> star </span>
31+
</section>
32+
<script src="app.js"></script>
33+
</body>
34+
</html>

‎ProgressStep/style.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
height: 100vh;
9+
width: 100vw;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
flex-direction: column;
14+
flex-wrap: wrap;
15+
background: linear-gradient(45deg, #fc5c7d, #6a82fb);
16+
}
17+
.wrapper {
18+
height: 10vw;
19+
width: 30vw;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
flex-wrap: wrap;
24+
}
25+
26+
.container {
27+
height: 10vmin;
28+
width: 30vw;
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
position: relative;
33+
}
34+
.progress {
35+
background-color: #6daedb;
36+
position: absolute;
37+
top: 50%;
38+
height: 5px;
39+
width: 0%;
40+
z-index: 1;
41+
transition: 0.3s;
42+
}
43+
.container:before {
44+
content: "";
45+
height: 5px;
46+
width: 95%;
47+
position: absolute;
48+
top: 50%;
49+
left: 10px;
50+
background-color: #fff;
51+
z-index: -1;
52+
}
53+
.circle {
54+
background-color: #fff;
55+
height: 30px;
56+
width: 30px;
57+
border-radius: 50%;
58+
border: 2px solid rgba(0, 0, 0, 0.493);
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
z-index: 10;
63+
}
64+
.circle.active {
65+
border-color: #6daedb;
66+
}
67+
.btn {
68+
background-color: #d45113;
69+
color: #fff;
70+
border: 0;
71+
border-radius: 10px;
72+
cursor: pointer;
73+
padding: 8px 30px;
74+
margin: 5px;
75+
font-size: 14px;
76+
}
77+
78+
.btn:active {
79+
transform: scale(0.98);
80+
}
81+
82+
.btn:focus {
83+
outline: 0;
84+
}
85+
86+
.btn:disabled {
87+
opacity: 0.5;
88+
cursor: not-allowed;
89+
}
90+
91+
/* Satr rating */
92+
.star-wrapper {
93+
height: 8vmin;
94+
width: 15vw;
95+
display: flex;
96+
justify-content: space-between;
97+
align-items: center;
98+
cursor: pointer;
99+
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@
8585
</tr>
8686
<tr>
8787
<td>15</td>
88-
<td><a href="doubleClickEvent">Quotes Generator</a></td>
88+
<td><a href="doubleClickEvent">Double Click Event</a></td>
8989
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/doubleClickEvent/">Link</a></td>
9090
</tr>
9191
<tr>

0 commit comments

Comments
 (0)