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 (Flexbox, SASS, pure JS)

Iva 120

@Ivuska

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! 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!

Community feedback

@ChrisMulvanyGH

Posted

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

0

Iva 120

@Ivuska

Posted

Hi @ChrisMulvanyGH thank you for your comment and recommendation :-)

I am quite new to frontend so this course looks very attractive to me!

Have a nice days.

Iva

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