Frontend dev project for a star rating system

I'm wondering if there if an easier way to go about this, specifically when using css to highlight all previous items in the list and if there's anything I can do to improve my javascript. However it does alll work. I'm not sure about the psuedo elements, i want feedback if i'm using the most efficent code. https://codepen.io/Ziphour/pen/wvZovga
5 Replies
glutonium
glutonium8mo ago
const stars = document.querySelectorAll(".card__star");
const reply = document.querySelector(".card__textreply");
const replies = [

"We’re sorry to hear that you had a bad experience. We would like to learn more about what happened and how we can make things right.",
"We apologize for the inconvenience you experienced. We appreciate your feedback and would like to work with you to address any isses.",
"Thank you for your feedback. We're sorry to hear that your experience wasn't perfect. We would love to hear more about your concerns to see how we can improve.",
"Thank you for your positive feedback! We're glad to know that you had a great experience and we appreciate your support.",
"Excellent! We're thrilled to hear you had such a positive experience. Thank you for choosing our platform"

]
// iterate through the stars
stars.forEach((star, index) => {
// add an event listener to each star
star.addEventListener("click",() => {
// when clicked we loop through all the stars img
stars.forEach((img, idx) => {
// using the index we are setting all the stars starting from the first upto the one that's clicked to orange star
if(idx <= index){
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else{
img.src = "https://iili.io/JWLi1hN.png;"
}
})
// using the index to select the appropriate reply
reply.textContent = replies[index];
})
})
const stars = document.querySelectorAll(".card__star");
const reply = document.querySelector(".card__textreply");
const replies = [

"We’re sorry to hear that you had a bad experience. We would like to learn more about what happened and how we can make things right.",
"We apologize for the inconvenience you experienced. We appreciate your feedback and would like to work with you to address any isses.",
"Thank you for your feedback. We're sorry to hear that your experience wasn't perfect. We would love to hear more about your concerns to see how we can improve.",
"Thank you for your positive feedback! We're glad to know that you had a great experience and we appreciate your support.",
"Excellent! We're thrilled to hear you had such a positive experience. Thank you for choosing our platform"

]
// iterate through the stars
stars.forEach((star, index) => {
// add an event listener to each star
star.addEventListener("click",() => {
// when clicked we loop through all the stars img
stars.forEach((img, idx) => {
// using the index we are setting all the stars starting from the first upto the one that's clicked to orange star
if(idx <= index){
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else{
img.src = "https://iili.io/JWLi1hN.png;"
}
})
// using the index to select the appropriate reply
reply.textContent = replies[index];
})
})
this is how i would do it for this part
if(idx <= index){
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else{
img.src = "https://iili.io/JWLi1hN.png;"
}
if(idx <= index){
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else{
img.src = "https://iili.io/JWLi1hN.png;"
}
u can also just use ternary if u want but i think it looks more readable as it is
img.src = (idx <= index) ? "https://iili.io/JWLiEQI.png" : "https://iili.io/JWLi1hN.png";
img.src = (idx <= index) ? "https://iili.io/JWLiEQI.png" : "https://iili.io/JWLi1hN.png";
ZNP
ZNP8mo ago
Thank you so much, I don't quite understand about you putting two arguments in the foreach loops and how it knew what was what? but yeah this code is brilliant ty! man
glutonium
glutonium8mo ago
the call back function of a forEach() can take two arguments. item and index. item is mandatory and it represents the current item of an iterable (e.g array) on a particular iteration index is optional and it represents the index of the current item that is being iterated idk if that's what u mean here we basically have a nested loop a loop within a loop 1 loop is to add event listener to all stars and this runs only once as we r only going to loop through it once and add event listener to all stars meanwhile the 2nd loop is within a call back function the 2nd or inner loop pr inner forEach will run everytime a star is clicked when a star is clicked we start looping through all stars, from first to last we know that if thr 4th sart is clicked then it's a 4 star rating / all the first 4 stars will be orange now with the inner loop we'd start from the first star and start changing the src="" to orange start up until the start that has been clicked rest will be set to a different src="" which is the grey one u cab re factor the code like this
const callBack = (index) => {
// when clicked we loop through all the stars img
stars.forEach((img, idx) => {
// using the index we are setting all the stars starting from the first upto the one that's clicked to orange star
if (idx <= index) {
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else {
img.src = "https://iili.io/JWLi1hN.png;"
}
})
// using the index to select the appropriate reply
reply.textContent = replies[index];
}

// iterate through the stars
stars.forEach((star, index) => {
// add an event listener to each star
star.addEventListener("click", () => callBack(index))
})
const callBack = (index) => {
// when clicked we loop through all the stars img
stars.forEach((img, idx) => {
// using the index we are setting all the stars starting from the first upto the one that's clicked to orange star
if (idx <= index) {
img.src = "https://iili.io/JWLiEQI.png";
}
// rest are set to grey star
else {
img.src = "https://iili.io/JWLi1hN.png;"
}
})
// using the index to select the appropriate reply
reply.textContent = replies[index];
}

// iterate through the stars
stars.forEach((star, index) => {
// add an event listener to each star
star.addEventListener("click", () => callBack(index))
})
if this makes u understand better
ZNP
ZNP8mo ago
Oh shit i get it So can all array methods intake an element and index as their first and second argument? and how come you don't need to assign an argument for the clicked value, how does the code know which index within the star array it refers to in this: const callBack = (index) => { // when clicked we loop through all the stars img stars.forEach((img, idx) => { // using the index we are setting all the stars starting from the first upto the one that's clicked to orange star if (idx <= index) { img.src = "https://iili.io/JWLiEQI.png"; } // rest are set to grey star else { img.src = "https://iili.io/JWLi1hN.png;" } }) // using the index to select the appropriate reply reply.textContent = replies[index]; } oh shit is it because of () => callback(index) getting the index of the clicked star? and then the rest of the code says any index number less than or equal to is a gold star?!
glutonium
glutonium8mo ago
not all like map or reduce i believe takes 3 better u just check yourself yes
Want results from more Discord servers?
Add your server