Skip to content
Submitted 4 months ago

Summary Component with React

grgrnkoo•520
@grgrnkoo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Proud that it is my first project, using React, but comparing to my previous projects it was a bit hard. Hope to get familiar with techniques faster. That's only a matter of practice, I think

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

First challenge was to fetch a local JSON file. I tried to fetch it like it was external, but turned out I should only import it. Other challenges were just about getting comfortable with modular system and other React features

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

I couldn't figure out how to inherit height from a parent without hardcoding it. With vanilla JS I always coded height: fit-content and all children with height: 100% inherited full height of the tallest element. Here I wasn’t apply a height until I hardcoded height: 48vh in App.js

Would love to read how to solve this problem. I tried almost everything, but nothing works

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    Well, you doesn't need to hardcode height here at all. You already use flex on the container for the cards, so you can adjust height by changing (or just omitting) align-items property. The default value of align-items is stretch so the biggest card will define the height of the container and the smaller one adjust to it.

    Congrats with the first React challenge =)

    Marked as helpful
    1
    grgrnkoo•520
    @grgrnkooPosted 4 months ago

    @Alex-Archer-I ahhh, forgot about the stretch value, mixed it up with a flex grow🙃

    will try it right now. thanks a lot

    1
    grgrnkoo•520
    @grgrnkooPosted 4 months ago

    @Alex-Archer-I align-self, not align-items but your comment showed the right direction. thanks again🙏🏻

    1
    Alex•3,130
    @Alex-Archer-IPosted 4 months ago

    @grgrnkoo

    If you change align-items of the App it'll be the same as apply align-self to both cards =)

    1

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