Skip to content
Submitted over 3 years ago

Interactive rating component (Flexbox, SASS, pure JS)

Iva•120
@Ivuska
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello! This was quite challenging for me especially because of the used JS. I struggle a little bit with the syntax. I also found out that I was not completely sure what exactly I need to ask/search in google or in the forums (how to call it when I need to sent the chosen number to the next card as the selected rating).

  • do you have any tip for quite good JS tutorials, please?

I also struggled with creating the 'perfect' circle when the text is in it. I used these five properties (height; width; line-height; text-align; border-radius) to define it:

  • but I am not sure how "elegant" this solution is? Do anyone have some tips for better/easier or more used solution?

Thanks a lot in advance for anny feedback and/or help and have nice coding time!

Code

Please log in to post a comment

Log in

Community feedback

  • Chris Mulvany•120
    @ChrisMulvanyGH

    Hi Iva,

    Good work on this one, I don't know if you are experienced or new to frontend as your solution looks solid. So from a frontend point of view well done. The great thing about these challenges is that you can always return and refactor the CSS, HTML or JavaScript. As you learn and develop new skills you can revisit your solutions to see how your code can be more 'Elegant'. My advice "Fail a lot, and do it again, and again" this is how to become a great frontend developer.

    With regard to JavaScript coding I would highly recommend the Coursera JavaScript for Beginners Specialization. There are 4 courses in the specialization and you should be able to do all by choosing 'Audit' for free. You won't get certification when auditing but the training is really good for a beginner.

    Hope this helps!

    Chris Mulvany

    Marked as helpful

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