Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Cannot read properties of null (reading 'code')
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

Intreractive Rating Component

P

@seapagan

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


I'm quite happy with the JS in my solution, bearing in mind that my Vanilla JS is not very strong. Saying that, I'd appreciate any hints or suggestions, are there any better practices I should have followed? I do appreciate that some of the code may fail in older browsers.

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hi, Grant Ramsay! 👋

Great job on this challenge! 👏 Your solution looks good and works well! 🙌

A few things I'd like to suggest are,

  • Using a form element in your solution, which will make the component much more accessible and make it easier to implement the interactive section of the card. Use radio elements for the for the rating buttons (which will take care of only one rating being selected at a time), and make sure the submit button is inside the form so that it will submit the form when clicked. You can then select the value of the radio elements in your JS and use that to set the next view of the component.
  • Using less divs for everything in your markup and more semantic HTML elements (such as p or heading tags). Learn more about semantic HTML and why it's important here. 😉

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

2

P

@seapagan

Posted

@ApplePieGiraffe

Thank you for the brilliant and helpful feedback! 😊

Great idea on using radio buttons thanks, I'll definitely try that and convert it to a form, and see how it comes out. Would definitely make the JS easier. 😄

Semantic HTML, yeah I know this is one of my weaknesses 😂. I'm working to improve that in future challenges, so thanks for the link, I'll defo work through that.

Have a great evening! 👍️

1
P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

@seapagan

Glad you found those points helpful! Have a great day, too! ☀️

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