Skip to content
Submitted over 1 year ago

Solution - Interactive Rating Component

Leo Silva•40
@leozizz
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Following the challenge, I tried to do the best I could within what I know and with a little research, but I believe I can improve in the future. Can you give me tips on how to improve the code in general?

  • I used CSS Grid, Flexbox, Media Queries and CSS Variables to make the page organized and responsive, but I'm not sure if I used them in the best way.

  • I slightly changed the color palette suggested in the style-guide to be more like the original design.

  • I also added a validation with JavaScript that is not in the challenge to check if the user chose one of the ratings before sending the submit.

I intend to refactor the code, mainly the JavaScript as soon as I get more knowledge in the language. Do you have any tips, what do you think?

Community feedback

  • Doston Nabotov•950
    @dostonnabotovPosted over 1 year ago

    Hey, there! 👋

    Congrats on completing the challenge! Clean and well-structured code! But, I've some suggestions.

    Let's start with HTML. If you also want to care about the accessibility in your website, here are some suggestions:

    • Instead of using the regular buttons, <button class="rating-button">1</button>, you could use radio inputs, <input type="radio" name="rating">, making it easier to rate only one of them. Read more here
    • Wrap the rating state inside the <form> element. It can really help those who navigate with their keyboard.

    For JavaScript part, if you had implemented radio input I mentioned earlier, you wouldn't need this piece to code:

    ratingButton.forEach(button => {
    button.addEventListener("click", function() {
        /* other code */
    });
});

    Because you could easily check the value of radio input when the submit button is clicked.

    As for CSS, everything looks good to me.

    Hope it helps! Good luck on your coding journey!

    Marked as helpful
    1
    Leo Silva•40
    @leozizzPosted over 1 year ago

    Hey @dostonnabotov!

    Thanks for the suggestions!

    • I made some adjustments to the buttons as mentioned and some changes in the script.

    • I may need to make some more adjustments in the future, but apparently everything is still working.

    Thanks a lot for the tips, I'm open for more comments on the new code!

    Thanks so much for the feedback once again! :)

    0

Please log in to post a comment

Log in with GitHub

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