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

Responsive Todo app

snhase 200

@snhase

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


What are you most proud of, and what would you do differently next time?

  • Use localStorage to save todo list
  • Implemeted the drag and drop functionality to reorder items on the list

What challenges did you encounter, and how did you overcome them?

While implementing the drag and drop functionality, there were multiple dragEvents, figuring out which ones I needed to use was challenging. The drag and drop API document was very helpful.

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

Any suggestion/feedback on how to add custom cursor styling for drag-drop function? My current implementation does show the move effect cursor but only works intermittently to show tailwind's custom grabbing cursor style.

Also, the HTML Drag and Drop API doesn't have mobile compatiblity. In future will use some library to implement the drag and drop functionality so it's responsive. Right now I am thinking about using dndkit. Would like to ask the commmunity members if they have any other suggestions/recommendations?

Community feedback

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