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 (Using HTML+CSS+JS)

@yunusemrecinar

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


What I add extra from the request ?

  • I add a linear gradient to the background

Community feedback

@yacineKahlerras

Posted

Hey @Yunuscinar41 good job on the design i only have one suggestion that might make the card a little cooler which is the inner shadow for both the main-container and thank-you containers

box-shadow: inset 0 -10rem 15rem #00000050;

you can play around with the values till it feels right. hope that helps and happy coding !

Marked as helpful

1

@Christ-Kevin

Posted

congrats for your solution @Yunuscinar41, to correct the html issue you should remove the charset attribute on the script tag. I also appreciate your "rate again" button. The user have this opportunity to rate a second time if he wants or if he changes his mine. But there is a problem cause the user can click the submit button even if he has not given a rating and he get the default rating "5" as a result. I would suggest you to use the "localStorage.setItem()" method to save the textContent in your rating-event inside the browser server and then use the "localStorage.getItem()" to get this content that would be written on the page that loads after pressing the submit button.

I really hope It helps

Happy coding :)

Marked as helpful

0

@yunusemrecinar

Posted

@Christ-Kevin Yes, you're right however that's the part of the joke I tried to make :/. If users forget and click submit, then they'll give 5 stars.

1

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