Skip to content
Submitted 5 months ago

react,css,animate.css

Alejandro•430
@adelayglesiafleitas
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

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
    @caner404Posted 5 months ago

    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•430
    @adelayglesiafleitasPosted 5 months ago

    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

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