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

Frontend Mentor - Interactive rating component solution

Divine Ugorjiā€¢ 350

@DivineUgorji

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


What are you most proud of, and what would you do differently next time?

Hello guys šŸ‘‹, my name is Divine and this is my solution to the Interactive rating component challenge on Frontend Mentor.

šŸ›  Built with

  • ā˜‘ļø Semantic HTML5 markup
  • ā˜‘ļø CSS custom properties
  • ā˜‘ļø Flexbox
  • ā˜‘ļø CSS Grid
  • ā˜‘ļø Mobile-first workflow
  • ā˜‘ļø BEM Methodology
  • ā˜‘ļø Javascript DOM API
  • ā˜‘ļø Javascript formData API

šŸ‘Øā€šŸ’» What I learned

  • āœ”ļø Javascript DOM API
  • āœ”ļø Javascript formData API

This is my first Javascript project šŸ˜œ, and I learned a lot from it. I do hope, you take some time to give some feedback, I'd appreciate it. Thanks.

Community feedback

Edwin Chengā€¢ 340

@edwinc73

Posted

Nicely done. You could try adding some padding on the numbers so they appear centered.

When i view it with the mobile inspection, the width of the card doesnt change and actually overflows horizontally. To prevent this you could use media queries to change the width of the card respectively.

Another thing is that the radio inputs can not be accessed by keyboard

lastly the button should be orange with /black or darker text as the contrast is low for orange/white

0

Divine Ugorjiā€¢ 350

@DivineUgorji

Posted

@edwinc73 Thank you for your suggestions, I'd take them into account and implement them in the project. I appreciate your input.

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