Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component

P

@hectorlil48

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


All feedback is welcomed

Community feedback

@UtkuKaanArasan

Posted

Looks great, you commented your code and it's easy to understand. My only recommendation is in css you could have used variables so you can change the color theme easily in the future.

1

P

@hectorlil48

Posted

@UtkuKaanArasan Thank you, I'm still getting used to writing CSS but I will look into that.

0
David 8,000

@DavidMorgade

Posted

Hello again Hector! seems that you uploaded a few projects at the same time

I dig a bit in your JS logic and everything seems ok for me! choosing the onSubmit function instead of a 'click' listener is a more readable and better way to approach the solution!

I would just add a bit more of functionality, showing the user a pop up or alert window if they submit when no rating was selected, you can do this easy in your eventListener adding an if check like this:

    if(checkedInput === null)  return alert('Please choose a rating before submitting!')
        const selectedRating = document.querySelector(".selection");
        selectedRating.textContent = "You selected " + checkedInput.getAttribute("value") + " out of 5"
        rateStart.classList.add("hidden");
        thankYou.classList.remove("hidden");

This will check if the user selected any rating button it will keep going on the function, if not it will just return an alert and stop working!

Hope my little advice helps you, let me know if you try and you see the results! good job on this challenge

0

P

@hectorlil48

Posted

@DavidMorgade Thanks for the tip. I'm new to JavaScript, so I was trying to do as you said and it kept breaking my code, but I figured it out.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord