Skip to content
Submitted over 2 years ago

TODO application created with React and SCSS

Ollie•580
@ohermans1
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

This is my 3rd project created using React (and my most complex by far). I feel like I learned a hell of a lot working through it.

I've got a few outstanding sections I will need to come back to:

  1. I want to add drag and drop functionality, but couldn't work it out. I was trying to use react-beautiful-dnd - I would appreciate any suggestions.
  2. I haven't yet added a light/dark mode toggle - any tips on how to do this simply in React?
  3. I forgot to add the delete button for tasks - This one won't be tricky, but I want a bit of a break from this project.

Once I've done a bit more work on my react course, I may come back and fix the above, and reload the new solution.

EST time: 8 hours | Actual time: 12 hours (I took a lot longer than expected, as a lot of learning and trial/error was involved - times recorded using Wakatime)

Community feedback

  • Ahmad-jama•30
    @Ahmad-jamaPosted over 2 years ago

    That's a great project

    But one I click the todo it doesn't complete I think you can make it complete if I clock on the li also that's will be better

    And the h1 that say( todo) don't give it letter spacing

    And add some transition

    And remove the the files you don't use in github just like the test and reportwebvitals

    Marked as helpful
    1
    Ollie•580
    @ohermans1Posted over 2 years ago

    @Ahmad-jama Thanks for your feed back! I will tidy up the files and see what I can implement next time I do a refresh on this one!

    (PS, the notes should mark as complete if you click the little circle next to each one (I hope haha))

    0
  • Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    Hi Ollie, great work on this challenge! 😉

    Here are a few tips for improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • img element must have an alt attribute, it's very important!
    • i can add task also with blanks, add a control... The trim() method can help you -> read here
    • for the dark mode you can use React Hook for add a class dark to the html -> read here

    Overall you did well 😁 Hope this help!

    Marked as helpful
    0
    Ollie•580
    @ohermans1Posted over 2 years ago

    @denielden Thanks for your awesome feedback Deniel, I will take a look through your the provided resources and implement what I can when I do a refresh of this project!

    1
    Ollie•580
    @ohermans1Posted over 2 years ago

    @denielden - Thanks especially for the react hook dark mode link, I was looking for something exactly like that!

    1
    Travolgi 🍕•31,400
    @denieldenPosted over 2 years ago

    @ohermans1 You are welcome! Keep it up 😁

    1
  • Divine Obeten•2,415
    @Deevyn9Posted over 2 years ago

    Amazing project, This project is absolutely incredible, but making the theme toggle work would be great, and adding padding to each of the active state buttons would make it perfect too.

    Happy coding

    2
    Ollie•580
    @ohermans1Posted over 2 years ago

    @Deevyn9 Thanks so much for your kind feedback! :)

    0

Please log in to post a comment

Log in with GitHub

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