Skip to content
Submitted over 1 year ago

Interactive Rating Component with SASS

Basit Korai•350
@basitkorai
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, My Fellow Developers, Hope you're nailing it in your coding journeys. This is my Initial Solution to the Interactive Rating Component

I learned to use setTimout() Method to Run a block of code responsive built it with mobile-first workflow.

Had tons of fun and hard time while coding this project! I have tried to make it as good and accurate as possible, but yet I know there are some accessibility, and responsiveness issues in it. Which I will try to fix in the future.

So Feel free to leave any feedback and help me to improve my solution or make the code better in any way possible.

I'll be looking forward to hear lots of feedback from you guys. ✌️

Community feedback

  • Doston Nabotov•950
    @dostonnabotovPosted over 1 year ago

    Hey, there!

    Congrats on completing the challenge.

    Here are some suggestions I would like to make:

    HTML:

    • Try using radio checkboxes <input type="radio"> instead of regular buttons. Because you only have to select one rating, it will make your life much easier. Also, less JavaScript code.

    CSS:

    • I think you're missing * selector in your first few lines in your code.
    • I wouldn't recommend setting transition on every element. Use transition property where you need it.
    *,
*::after,
*::before {
  box-sizing: border-box;
}

    JavaScript:

    • If you've switched to radio checkboxes by this time, you can safely remove your code where you toggle the state of buttons.

    Other than these, everything looks good to me.

    Good luck on your coding journey!

    Marked as helpful
    1
    Basit Korai•350
    @basitkoraiPosted over 1 year ago

    @dostonnabotov Thanks a million for your suggestions, man. I will make those changes to it. 😊

    0

Please log in to post a comment

Log in with GitHub

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