Skip to content
Submitted over 2 years ago

Interactive Rating Component (JS + Custom Design + Modal)

Lucas 👾•104,200
@correlucas
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

👾 Hello, Frontend Mentor community. This is my solution for the Interactive Rating Component

This challenge was quite hard, was my first real Javascript challenge ever. I took a lots of time trying to find out how to make the rating buttons connect to the submit button to display the output popup showing the selected number. I had look several tutorial videos to understand the JS structure so I follow a video from this channel in youtube TsbSankara - JavaScript - Interactive Rating Component. Once I did the basic challenge I created a modal screen to request the user to select a button before submit, for the second step I had to ask a friend @AdrianoEscarabote for help and after a lots of his patience and some explanations I get it.

🎨 I added some custom features:

  • 👨‍🔬 Custom UI Design + Animations.
  • 🧚‍♀️ Custom Modal Popup

If you can add something or give me some tip. I'll be happy to hear any feedback and advice!

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Congrats on complete this challenge and welcome back! 🎊🎆🍻 (Been a while since your last submit).

    Beautiful design like always! 😍

    Here are some suggestions:

    • To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️ (along with a legend) and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection. Lastly, a button will be the last thing before closing the form.

    More Info: 📚

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form ⚠️ as a submit.

    More Info:📚

    Click vs. Submit EventListeners

    • To get the ‘rating’ ⚠️ you would use const rating = form. querySelector (" input [type= 'radio']: checked")
    • ⚠️ Do not forget to convert you CSS units to relative units.

    Happy Coding! 🎆🎊🪅

    Marked as helpful
  • Makinde Sodiq•80
    @sodiqmakinde

    This is really an amazing UI, it will be nice if the selected number can be highlighted when the user click on any number before submitting their rates. Apart from this, I will saying this is really a great design with amazing animation. ☺️

    Marked as helpful
  • Wendy•2,130
    @wendyhamel

    I'm a bit late to the party but I have some food for thought on this challenge. You got some excellent advice here already!

    I like the custom design you mixed in this challenge.

    When I read about the modal you implemented and the advice Grace gave you about it, I thought about a simpler way to address the problem of not submitting an empty form. You could disable the button until the user gives a rating. This way you can't submit the rating empty and you do not need the modal and all the code; accessible html and javascript needed to make the modal work properly.

    I looked at my own version of this challenge and I could certainly improve it as well. At the time my focus for the challenge lay in exploring alpine.js and implementing transitions. Maybe I'll give it another go myself.

    Happy coding!

    Marked as helpful
  • Chukwudobe Micah Chinedu•700
    @chukwudobe-Micah

    Lucas is back! My browser doesn't lete access the site though. It says "deceptive site ahead".

    Marked as helpful
  • Chamu•13,760
    @ChamuMutezva

    Hi Lucas Well done with your challenge so far. Here are some improvements that I would suggest.

    • some images are decorative , hence they should have an empty alt value. If the image is not decorative, the alt value has to be beneficial to assistive technology users or in the case the image fails to load. For example <img src="./images/icon-star.svg" alt="Star Icon"> , words like icon, image, graphic, picture etc are usually read by screen readers and should not be part of the alt value (can simply cause confusion through repetition of words). The alt value is generally the message contained in the image. In my opinion the star is purely decorative in this example.
    • the first heading of a site should be an h1 element, if it is a book the h1 will be the equivalent of the book title then the other heading should follow a sequential order.
    • consider also using tools to validate your code <h2> Please give us feedback before submitting ✌</h3> . Here an h2 is mixed with an h3
    • when a selection has to be made from a group elements (one selection) , the most suitable element will be a group of radio-buttons

    Good luck

    Marked as helpful
  • Lucas 👾•104,200
    @correlucas

    @elaineleung live site updated and safe 😂

  • Sidney François•110
    @sidneyfrancois

    Muito bom, eu mesmo sempre evitei css mas ver trabalhos assim me deu ânimo. Eu ainda to no básico e andando, aprendendo fazendo mesmo.

  • felipe fama•210
    @FelipeFama

    Congratulations on the excellent work !

  • Adriano•42,890
    @AdrianoEscarabote

    Congratulations man! you always do a great job!

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