Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
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- FlexBox, Semantic HTML

SolidEnderā€¢ 120

@SolidEnder

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


So the biggest difficulty I had with this one was first, figuring out how to actually send the user to the second user to the second panel upon submission, but also actually adding the rating into the span tags. Once I actually figured out the second panel, the output read "You have selected SUBMIT out of 5 stars", but both problems were a relatively easy fix. It turns out that I added the event listener to the whole first panel, and since SUBMIT was was sent me to the next one, it printed out SUBMIT! So instead I changed that to the selection of ratings instead, and then I actually got it to add the rating to the empty span element. Overall the JavaScript here wasn't overly difficult to implement- it just helps not to overthink it like I did. But I thought this was a good second project to use JavaScript on. This was also my first time really utilizing mostly semantic HTML elements rather than just a whole bunch of divs, aside from my last project, which used a few at least. But I'm not sure if all of the semantic elements I used made sense or not, like wrapping both panels with the article tags rather than just sections. So let me know if that makes sense or not and what would be a better practice in that instance! Other than that feel free to give me any other suggestions and feedback you might have!

Community feedback

@VCarames

Posted

Hey there! šŸ‘‹ Here are some suggestions to help improve your code:

  • Remove all article, section and header elements that you are using; they are being used incorrectly.
  • The icons/illustrations in this challenge are purely decorative so their alt tag should be left blank (alt="").
  • To ensure the ratings are fully accessible to all users and are built with the proper elements, the entire rating part needs to be built using a form element.
  1. Wrap all elements within a fieldset, which will contain a visually hidden legend using CSS.
  2. Within the fieldset, include five (5) input radio elements, each associated with a corresponding label to enhance the accessibility of the "ratings."
  3. Lastly, include a button to allow users to submit their selection.
  • Your JS should be in a separate file for organization and maintainability. This is called separations of concerns.
  • After implementing the above changes, for your JS, the eventListener should be attached to the form element, listening for a submit event.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! šŸ‘¾

1

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