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

Rating Component (CSS, HTML)

@AdrianeSantosDev

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


I completed this challenge after finishing my first Frontend Mentor project, which was really helpful, especially with the tips I received. The trickiest part of this challenge was deselecting the other numbers after selecting one, but a quick search on Google and Stack Overflow helped me find the solutions I needed. I also played around with different elements for the sections and ended up using <span> for the numbers. I'm not entirely sure if it was the optimal choice, but it definitely worked well. If you have any suggestions or alternative approaches, feel free to let me know.

Community feedback

@ExpertoMontanero

Posted

The desktop design is simply 1:1, so congratulations :>. Refering to your question, I think it would be better option to make this ''numbers'' buttons as buttons (<button> </button>), but it is a detail. However mobile accesibility is bigger problem. Your design is not responsive. So that you should use some media querries on your design. Try look how your design looks on some mobile devices in dev tools. You can look at my solution Media querries on my profile. I hope that I helped. If you have any questions, go on. Happy coding :>

Marked as helpful

0

@AdrianeSantosDev

Posted

Hello @ExpertoMontanero

It's actually funny how using <button> instead of <span> seems so obvious now. I don't know why I didn't choose that initially, haha. When it comes to the solution being responsive, I did try using a media query, but it didn't work out quite like yours. I'll definitely make some changes to address that. Thanks a lot for the feedback; I really appreciate it.

0

@ExpertoMontanero

Posted

@AdrianeSantosDev I see that you fixed it. Great job. :>

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