results summary with javascript json

I recommend putting the left-card and right-card divs inside a div (or something semantic like section or article). In my opinion, this will help you layout more easily with flex or gird.

For the button, I recommend doing border-radius: 100vw; so you don’t have to guess the right number to make it round.

For the summary items, I recommend using rems instead of % in the border-radius. something like border-radius: 0.5rem;. in general its better to use rems for margins, padding, font-size. It's okay to use 50% for the border-radius like you did for the cirlce 👍

For the circle, I recommend doing a width of 12.5rem and height 12.5rem, instead of height (you can also do aspect-ratio: 1 / 1;, it will set the height like the width that you set). To center the circle I recommend doing margin-inline: auto (it will set the margins on the sides to auto).

Overall, you still did a good job. I am sure that in the future you will be able to do it more professionally as you want.

i noticed after i uploaded the project that the button went outside the box this is likely due to margins.