Todo app built with React | Styled Components | Framer Motion

Community feedback

• 

  P

  Christopher Adolphe•600

  @christopher-adolphePosted almost 2 years ago

  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

  ---

  

  Abed Fetrat•450

  @abedfetratPosted almost 2 years ago

  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