interactive-rating

Community feedback

• 

  vong•190

  @vong0-0

  Posted 3 months ago

  What are you most proud of, and what would you do differently next time? I’m proud of the way I implemented the interaction flow and UI elements using React and TailwindCSS. The use of Tailwind allowed me to quickly style the component with minimal code, which kept the project lightweight and responsive. I'm also pleased with how I structured the components—separating the rating and thank-you dialogs into distinct components made the code more modular and readable.

  Next time, I would pay more attention to the accessibility of the elements, especially when interacting with form elements like buttons and radio inputs. I’d also look into optimizing for different screen sizes to ensure the layout works well on all devices.

  What challenges did you encounter, and how did you overcome them? The hardest part of the exercise was handling the rating submission and dynamically passing the rating value to the "Thank You" dialog. Initially, I thought of using buttons for each score, but after some consideration and research, I realized that using a radio button system would be semantically more appropriate for a rating scale.

  I ran into a challenge in using buttons because they weren’t well suited for form submission (and I didn’t want to manipulate form behavior unnecessarily). The solution came when I found that using <label> and <input type="radio"> allowed me to take advantage of the form’s behavior while also making it easier to capture and pass the rating value to the next DOM element.

  This is where GPT and Grok really helped me by suggesting this approach. I learned a lot about leveraging the peer and checked classes in Tailwind to style radio buttons and their labels dynamically, which was fantastic!

  00