Submitted 7 months ago

DoMore (TODO) App | React.js

Sahil Kumar• 190

@Vi-r-us

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 are you most proud of, and what would you do differently next time?

Hi everyone! I wanted to share my React implementation of the todo app challenge. I've incorporated drag and drop functionality using onPointerDown, onPointerMove, and onPointerUp events. I would like to use onDrag pointer events instead of that.

What specific areas of your project would you like help with?

However, I would appreciate any feedback or advice on a few points.

I feel like using Pointer Events for the drag and drop functionality made my code a bit complicated and messy. I did my best to keep it clean by adding lots of comments, but any advice on keeping my code cleaner would be much appreciated.
Additionally, I would like to implement a locked axis drag like the one from the DnD Kit Library. If someone could help me with that, it would be great.
Lastly, there is a question mark sign on the webpage that I haven't been able to figure out where it's coming from. If anyone has any ideas, I would be grateful for your input.

Thank you all in advance! 😊

Community feedback

Ahmed Huzain• 380

@ElHuzain

Posted 7 months ago

Regarding the question mark problem. Check in the AppProvider component. Right after rendering out children in a {children}, there's a question mark right next to it.

Marked as helpful

Sahil Kumar• 190

@Vi-r-us

Posted 6 months ago

@ElHuzain Thank you for pointing it out. I totally missed that. 👍

Ahmed Huzain• 380

@ElHuzain

Posted 7 months ago

Well done 👏🏻👏🏻

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