Submitted about 2 years ago

Vue Slot + Flex & Grid Solution

raionus• 310

@sinjin25

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Expenses chart component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Vue solution abusing slots. Used grid instead of flex on the chart itself because I designed it last (so I had I knew the height it had to be ahead of time).

Questions: Any feedback on how to modify the size of the svg while keeping the aspect ratio? I literally just modified the height and width which didn't exactly give the results I wanted.

Community feedback

raionus• 310

@sinjin25

Posted about 2 years ago

Oh man I didn't actually finish. How do I delete this :(

EDIT: decent attempt after finishing the desktop version.

double border-radius on card elements
svg size is off
"my balance" font-size slightly too large (use padding/margin instead)
bottom-right text slightly too big; use padding to reduce the height of the div instead
bar labels slightly too small
add a tiny bit more padding on the bars so they're slimmer

Please log in to post a comment

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