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 built with HTML5, CSS3 and Vanilla JS

@KaydenGiang2512

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 personally think that I've improved since my first front-end challenge (the QR code), but I still have questions on coding practices as well as readability/scalability aspects of my code. Any form of constructive feedback/critique is greatly appreciated!

P.S: be nice please :D

Community feedback

@fazzaamiarso

Posted

Hello Kayden! Nice work!

Your SVG works fine on my browser.

I have a quick tip for you to quickly iterate an array instead of using for loop.

$RATINGS.forEach(rating => {
rating.addEventListener("click", ratingOption);
}).

Please refer to this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

I hope it helps! Cheers!

Marked as helpful

0

@KaydenGiang2512

Posted

@fazzaamiarso thank you for your feedback. I just double-checked and my SVGs are rendering properly now. Don't know why it disappeared in the first place but front-end can be confusing at times. Also, the forEach is a great tip!

0

@KaydenGiang2512

Posted

Can someone please help me figure out why the SVGs aren't showing on my website? It's been driving me crazy so if anyone can clarify this for me, that would be awesome!

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