Skip to content
Submitted over 4 years ago

Todo app

Sami ur Rahman•370
@qsrahman
A solution to the Todo app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The app was a joy to work on ✌️. However faced the following problems:

  1. Could not find a way to change the circle radius on hover 😩
  2. The drag and drop made the code unnecessarily complicated 😉 and also It will not work on mobile.

Any help in resolving the above shortcoming will be appreciated.

Happy coding 💕

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    Amazing work on this app, Sami! 🎉

    Great to see you've updated it and the DnD is now working well. If you want the gradient border colour for the active state, the way I'd do it would be to add another div element to wrap the .circle element and make it slightly bigger. Then I'd add a background-color on that element for the default state and a linear-gradient for the hovered state.

    Also, I'd have a go at changing the cursor when you hover over the checkbox and the delete icon. At the moment, it stays as the grabbing hand for the DnD, but it would be great if it changed to the pointer when hovered over those elements as they're clickable.

    Keep up the amazing work! 😍

  • P
    mi souto•135
    @mileine

    Great work! =)

    Your solution does look great and your attention to details made me look to my solution in a different way so I could improve it too.

    I think it's impressive you implemented the drag and drop yourself, but maybe using a library would be a way to solve the issue with mobile devices. I used React Beautiful Dnd by Atlassian - with support for mobile devices - and I'll probably use it again on other projects because I really like the result.

    React Beautiful DnD https://github.com/atlassian/react-beautiful-dnd

    How to Add Drag and Drop in React with React Beautiful DnD https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/

  • Grace•32,130
    @grace-snow

    Hey I really like this solution, it looks great.

    Shame the drag n drop doesn't work on mobile. I'm not good at React so hard for me to suggest changes, but could it be that drag and drop needs touch events as well as clicks or something? Really not sure what could cause it tbh, just guessing 🤷‍♀️

    Only a very minor suggestion would be to vertically align the crosses in their todo - they look a bit high.

    Maybe wrap the tick circles and the crosses in buttons for better semantics? But not sure about that, I'd have to test with a screen reader to see if that helps or hinders .. 🤔 As the whole card is clickable, its hard to know what the best semantics would be... Maybe it's all fine as it is! 😂

    Really good job overall, this is a hard challenge and you've done well

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Sweet work, Sami ur Rahman! 👏

    Your solution looks and works great! 👍

    I noticed that the state of the to-do list is saved even after I close and reopen the page, so good work on that! 🙌

    Happy coding! 😁

  • Sami ur Rahman•370
    @qsrahman

    Added DnD support using react-beautiful-dnd. The DnD is now working fine on desktop as well as mobile. ✌️

  • P
    mi souto•135
    @mileine

    Awesome!

    About changing the circle border color on hover, you can try changing it on its parent element <li> hover. =)

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