TODO application created with React and SCSS

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:
- 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.
- I haven't yet added a light/dark mode toggle - any tips on how to do this simply in React?
- 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)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Ahmad-jama
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 - @denielden
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 analt
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 - add
- @Deevyn9
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
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