Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React Todo using Vite with drag and drop feature

@zeynabmvs

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

Amjad Shadidβ€’ 770

@amjadsh97

Posted

nice job! you can prevent the shrink in the app__footer by adding flex-shrink property! so the text will be in one line.

.items_count { flex-shrink: 0; } .footer_btn { flex-shrink: 0; }

Marked as helpful

0

@zeynabmvs

Posted

@amjadsh97 Thanks, I fixed itπŸ‘

0
C0rniβ€’ 180

@c00rni

Posted

Nicely done !

I made a first version of this app without the drag and drop functionality and storage features, but after visiting your project I decide to refactor mine. I went into your code and learned a lot in the process.

Thank you for sharing

1

@zeynabmvs

Posted

Thanks @c00rni I'm glad it helped you. I sure learned a lot dealing with react-beautiful-dnd but after completing this challenge I realized it's not maintained anymore. So I suggest you using another Library for drag and drop.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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