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
Request path contains unescaped characters
Not Found

Submitted

Todo app built with React | Styled Components | Framer Motion

#react#styled-components#framer-motion

@abedfetrat

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is another of my projects built with React. I used Styled components for the styling. For the drag to reorder function I was thinking of implementing it without any libraries, but after doing some research I found out that the native drag and drop API didn't work with touch screen devices. So I ended up using Framer Motion because of it and that we get nice animations for free.

Let me know If you have coded the drag and drop functionality without using libraries, as I'm still interested to see how it's done. ✌

Community feedback

P

@christopher-adolphe

Posted

Hi @abedfetrat 👋

You did a great job on this challenge. 👍

One small thing I have noticed, given I have added 3 new tasks, when I drag the last task from the bottom of the list and drop it at the top, it gets marked as completed. I'm pretty sure this has something to do with the region of the task that's clickable to toggle as active/completed. If you initiate the dragging from this region, when you'll drop the item, the toggling is also triggered. But strangely, I notice it is only happening when dragging an item from the bottom to the top.

Framer Motion looks really cool. I want to try it on my next project. I've always used CSS modules with React but when I see how clean you've been able to keep those styles within your components, I think I should styled components a try as well.

Keep it up.

Marked as helpful

0

@abedfetrat

Posted

Hi @christopher-adolphe Thank you for the feedback, it's much appreciated.

I see now the issue you described. I made the checkbox and text clickable per the design to toggle the task, but maybe it would be better to have a dedicated are/toggle for initiating the draging so it doesn't interfere with the other. It's strange that it only happens with the last item 🤔

Yeah styled components is nice to work with. It's very easy to get started with, you should give it a try 👍

0

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