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 Component

CharlieeLunaβ€’ 260

@CharlieeLuna23

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!

I'm back from a 2 month break after my last project. I was out studying JS so that I could finally take on this challenge.

It was a really fun and exciting challenge being the first one I upload to this page.

I added an extra feature for a loading screen to make it feel more organic and for user experience, hope you all like it.

I realized I was using Chrome at 80% zoom (I only use it for coding) so i'll fix the size later.

Any feedback is for sure welcome! :D

Community feedback

Elaineβ€’ 11,400

@elaineleung

Posted

Hi CharlieeLuna, welcome back, and the JS looks good to me! 😊 I like how you clearly listed out where the things are, and the variables are also given easy to understand names.

The one comment I have is on the CSS, specifically regarding using the :focus class for styling a selected button. If I click somewhere else after clicking on a button, the button no longer has focus and therefore loses its style also, and as a result, no buttons appear to be selected, even though the score is already recorded. Instead, try using a class to style the button; this way, even if you click elsewhere that is not a button, the style remains on the selected button. Also, focus is mostly used to highlight which element is being interacted. If I started clicking on a link on the page, the link will have focus, and the button will lose its focus.

If you need some ideas on how to use classes, you can check out my CodePen here for this challenge: https://codepen.io/elaineleung/pen/RwMqMxZ

Great work on the whole, hope to see more JS challenges πŸ™‚

Marked as helpful

1

CharlieeLunaβ€’ 260

@CharlieeLuna23

Posted

@elaineleung Thanks a lot for the awesome feedback!

I didn't realized that as I never clicked anywhere else after selecting a button as I went straight to the 'Submit' button, nice catch!

Sorry for the late response but I was actually solving that problem. I don't think it is the best solution but it works so I hope it's okay.

Thanks again as your CodePen helped me a lot.

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