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

Solution retrospective
👾 Hello, Frontend Mentor Community,
This is my solution for the Interactive Rating Component.
100%
Accessible solution withform
integration, you check by pressingtab
key along with←
&→
to traverse your rating selection finally hitenter
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
andjs
inside thehtml
file itself to improve site performance. results86%
=>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 !
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@visualdenniss
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 - Account deleted
This comment was deleted about 2 years ago
- @CornflakesPlus
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?
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