Submitted 12 months ago

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

#accessibility#bem#lighthouse

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Preview site View code

This is a solution for...

Interactive rating component

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

visualdennis• 8,295

@visualdenniss

Posted 12 months ago

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

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Posted 12 months ago

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!

visualdennis• 8,295

@visualdenniss

Posted 12 months ago

@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. 🤔

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Posted 12 months ago

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 😂

Account Deleted

This comment was deleted 12 months ago

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Posted 12 months ago

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

Cornflakes• 290

@CornflakesPlus

Posted 12 months ago

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?

Abdul Khalid 🚀• 72,100

@0xabdulkhalid

Posted 12 months ago

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!

Please log in to post a comment

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