Interactive Rating Component using Html css and Javascript

Community feedback

• 

  Arne•1,110

  @DudeldupsPosted over 1 year ago

  Hey Clifford 👋 And welcome to the community!

  I recommend doing the smaller challenges first, there are several things in your code you should avoid. Better start small and not form bad habits (believe me, I wanted to jump ahead too) 😋

  • In your JS, you listen for the click event on the button, you should listen for the "submit" event on the form.

  • Say goodbye to all those pixels in your CSS, especially when declaring font-sizes. Use rem instead (or maybe em if you know what you're doing). This way, if a user has a custom font size set in the browser, the content will adjust accordingly.

  • Your card has a fixed height declared with vh. The larger my screen is, the loooonger it gets 😅 You should better give it a max-height so that the content fits properly inside.

  • Approach your design mobile-first. Declare all your basic CSS rules for a small screen size (320px and above) and then set rules for how the design should look when the screen gets bigger. You can use @media with (min-width: ...em) or clamp() and other functions like min() to have elements responsive without media queries.

  Again, I strongly suggest to just go and start with the QR-Code component and then work your way through harder challenges, it's really worth it 🤠

  Happy coding! 👾

  Marked as helpful

  0

  ---

  

  Clifford•20

  @RealHustlerPosted over 1 year ago

  @Dudeldups Thank you very much i appreciate your honest reply. I will take your advice in consideration

  0