Skip to content
Submitted almost 3 years ago

Animated Interactive Rating Component | Svelte TS + WindiCSS and Vite

#svelte#typescript#tailwind-css
Shawn Lee•580
@OGShawnLee
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

Hey! Shawn here. This is my very first solution. It took more time than expected since I had to figure out how to host it. Well I don't have much to say. I am pretty content with the result and extremely comfortable with the stack I chose: Svelte + Svelte Transition API + WindiCSS + TypeScript + Vite... Truly the joy of code. Only thing bothering me is semantic HTML and accessibility, any advice in that regard? Would love to get some feedback from you guys. Have a good one and thanks for reading/viewing!

Community feedback

  • Alex Li•400
    @awexliPosted almost 3 years ago

    Hey Shawn, nice solution :-)

    Instead of using span for the titles "How did we do?" and "Thank you!", it might be semantically better to use heading tags (<h1 />)

    Beyond the code itself, one thing to think about is the user experience. For example, what should happen if a user clicks submit without selecting any options? Should there be some type of UI feedback letting the user know they must select at least one option? How would you represent that? Maybe a little message below? It's good to keep user experience in mind as a Frontend dev -- good luck on your journey!

    Marked as helpful
    0
    Shawn Lee•580
    @OGShawnLeePosted almost 3 years ago

    @awexli Hello Alex. Yes, I should have used headings and about the UX I actually thought of adding a third state that handled errors but I didn't add it at the end. I will commit those fixes soon. Thanks for replying! :)

    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