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

INTERACTIVE RATING COMP 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

#accessibility#bem#lighthouse
Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

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


πŸ‘Ύ Hello, Frontend Mentor Community,

This is my solution for the Interactive Rating Component.

  • 100% Accessible solution with form integration, you check by pressing tab key along with ← & β†’ to traverse your rating selection finally hit enter to submit your result
  • Learned the usage of fieldset, legend, & radio input elements to build well accessible form
  • Scored 99.5% on Google Pagespeed Insights! 🀩
  • Actually it's been overwhelmed at this part because of performance issues. So i injected the css and js inside the html file itself to improve site performance. results 86% => 99.5% πŸš€
  • Used Prettier code formatter to ensure unified code format βš™οΈ
  • Layout was built responsive via mobile first workflow approach πŸ“²
  • Had a lots of fun while building this challenge ! 🀠
  • Feel free to leave any feedback and help me to improve my solution πŸ’‘

.

πŸ‘¨β€πŸ”¬ Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Community feedback

P
visualdennisβ€’ 8,255

@visualdenniss

Posted

Feels elegant and smooth. Great job with it. Only a minor detail, which i've believe you have forgotten is to add cursor: pointer; to the hover states of radio btns to indicate user that they are interactive elements. Keep up the good work!

Marked as helpful

1

Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

Glad you come up with an acceptable suggestion @visualdenniss!

  • I just already applied cursor: pointer for the div, but seems it's not working so i tried to add the cursor for the label itself it gonna work
  • Once again thank you mate!
0
P
visualdennisβ€’ 8,255

@visualdenniss

Posted

@0xAbdulKhalid Happy to hear it was something useful!

That's a really strange issue and more complex than i thought. I'm not so familiar with radio buttons, but when i tested it on the dev tools now adding cursor:pointer; for only label itself works only with the selected button. πŸ€”

0
Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

I'm also experiencing something weird here @visualdenniss,

  • I updated the css code with cursor: pointer for the label elements to get the job done
  • But the issue is the deployed site has not been updated yet, but the workflow has successfully run after editing the code
  • I wonder why this weird thing is happening πŸ˜‚
0

Account Deleted

This comment was deleted

1

Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

Glad to receive suggestion from you @MrSandipSharma!

  • Can you tell, in what mobile device you tested this site ?
  • So that i can also test the site according to the device screen size for simulation and test it for sure
0
Cornflakesβ€’ 290

@CornflakesPlus

Posted

Great job! Abdul Khaliq.

Nice and clean code, nice Read Me structure as well. For the Screen Reader Only file (sr_only), the CSS you used is a general copy-paste? Also, how did you get the badges in the Read Me file?

0

Abdul Khalid πŸš€β€’ 72,140

@0xabdulkhalid

Posted

Bro @CornflakesPlus,

  • I can't understand what you're asking, the css using for sr_only class is crafted with care because if anything misses then the sr_only element will fail to work as intendend. So every solution will consists the same sr_only styles (they are crafted by accessibility experts)
  • And next, the badges for the README.md file is not available, because it was manually build by developers like us.
  • We want to use badge.io api and any icons you wish from simpleicons just merge them and see the action

Hope am helpful!

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