Submitted over 2 years ago

Todo app + authorization (React, Reducer, Context, Firebase, Sass)

Xuan Hung• 120

@xuanhung1509

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

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

What I find the most intimidating task in this challenge is the how to separate the 3 filter buttons out of the todo list in mobile view. My solution just looks nearly to the design, but without the shadow at the bottom of todo list. The second most intriguingly task is to style the border of checkmark linear gradient because CSS does not support it natively. I'm interested in how you guys solve these 2 styling challenges.

Community feedback

Miroslav• 180

@miroslavdurin

Posted over 2 years ago

Hello, I would suggest using a custom hook which retrieves media dimensions of screen. I usually use useMediaQuery() hook. You can copy a hook code on this LINK.

Then you can have two versions of div.bottom and use which one you need, based on the screen size. I hope this helps...

Marked as helpful

Xuan Hung• 120

@xuanhung1509

Posted over 2 years ago

@miroslavdurin Thanks, definitely helpful! At first, I tried to handle this layout with purely CSS, but it still missed the box shadow. Your approach made things much more easier!

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