Skip to content
Submitted about 4 years ago

To-Do App With React

vehicom•150
@Vehicom0607
A solution to the Todo app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Felt pretty good about this one. Enjoyed making it.

My dark/light mode classes weren't optimal but too lazy to combine the similarities. Got a bit mixed up with naming. (Tasks vs Items etc.)

Please let me know if you have any suggestions!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey there, vehicom! 👋

    Good effort on this challenge! 👍

    A few things I suggest are,

    • Making sure the background of the page fills up the entire length of the screen (there seems to be some white space that appears at the bottom of the page when the list of items becomes long).
    • Preventing users from adding empty items to the to-do list.
    • Allowing users to mark items as completed by clicking on the name of the to-do list item (rather than just the checkmark to the left of the to-do item).
    • Adding cursor: pointer to the theme-switcher button and the to-do list items.

    As for the drag-and-drop functionality, you can check out React Beautiful DND—a popular library for implementing drag-and-drop in React. I haven't used it so much before myself, but it seems pretty good! 👍

    Hope that helps. 🙂

    Keep coding (and happy coding, too)! 😁

  • vehicom•150
    @Vehicom0607

    Ohhh. I forgot to add drag and drop to reorder the list. No idea how to do that with React though. Any suggestions?

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