Kevin Powell - Community•10mo ago

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•10mo 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";

ZNPOP•10mo 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•10mo 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

ZNPOP•10mo 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•10mo ago

not all like map or reduce i believe takes 3 better u just check yourself yes

Gaming

Programming

Frontend dev project for a star rating system