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,css,animate.css

Alejandro 380

@adelayglesiafleitas

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 are you most proud of, and what would you do differently next time?

I decided to try the Animate.css library to make the visualization more dynamic and engaging.

What challenges did you encounter, and how did you overcome them?

I added a counter to the final page to make a loop and prevent it from being static. I think that was the most fun part of the code.

What specific areas of your project would you like help with?

I would be very grateful for any help in improving the code.

Community feedback

caner404 280

@caner404

Posted

Hi Alejandro, I think your solution turned out well. Especially the animations are great. I have two small suggestions for improvement.

I would use an array.map() at this point to reduce code duplication.

<div className="container-buttons"> 
        //instead of this
        <Score number={1} score={score} setScore={setScore} />
        <Score number={2} score={score} setScore={setScore} />
        <Score number={3} score={score} setScore={setScore} />
        <Score number={4} score={score} setScore={setScore} />
        <Score number={5} score={score} setScore={setScore} />
       // you can do this
       [1,2,3,4,5].map((value) =>  <Score number={value} score={score} setScore={setScore} />
</div>

The counter is a nice idea, but I think it would make more sense if it went down instead of up. At the moment it counts from 0 to 3 and resets the component. I would suggest that it goes down from 3 to 0.

Marked as helpful

0

Alejandro 380

@adelayglesiafleitas

Posted

Hello @caner404, great 2 suggestions, thank you very much! I will apply them to the challenge as soon as I have time. Your input is greatly appreciated.

0

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