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

React + Tailwind CSS Solution - fully interactive! INTERVIEW PROBLEM?

@11kyle

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


Part of me wishes the dimensions were given in the free version but part of me is okay with not having them. When developing real-life products, you don't have a design with dimensions so not having them here is identical.

This is my favorite project so far! It uses JavaScript but at a Junior level. The JS that is needed is needed in almost every application too. Makes this a great interview project in my opinion.

Community feedback

Amélie 280

@aweliego

Posted

Hi Kyle!

I can't speak to Tailwind, but as far as I can tell, you did a good job building this app with React! I also liked that project, very simple in appearance but makes you revisit a lot of frequently used functionalities indeed. Like you, I found it a bit frustrating to see the difference between the dimensions of my solution and those of the design after submitting my solution, but then again, it is in my opinion not crucial to the quality of the project.

I also enjoyed reading your README by the way. It was interesting to read your thought process about the challenge and what you learned :)

Upon testing your solution I wanted to share with you the following suggestions/feedback:

  • I would give the 'cursor' property a value of 'pointer' for the rating and submit buttons, so it's clear that these are clickable elements.
  • If I submit without having selected a score, I get a 'You selected 0 out of 5', which makes sense since the rating state is initialised with 0. I suppose this is not the intended behaviour, so it would be nice to have some logic to prevent that from happening. [I am totally cheating a bit here, because I also just submitted my solution on this challenge yesterday and someone pointed out to me that my rating is 'undefined' when clicking Submit without selecting a rating - so I'm just passing this very good feedback around I guess 😆]

And as part of your continued development, why not add some transition when switching from the rating component to the thank you card? :)

Well done again! 👏

3

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