
Solution retrospective
Here is my first TypScript React App using key concepts like react hooks and context as well as typescript model classes and react-beautiful-dnd for the drag and drop function. Thank you for your feedback! :)
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AlexKMarshall
The design looks good, and is nicely responsive. The drag and drop works well and is keyboard-accessible.
There's a bug with clearing completed todos. It actually clears all of them and totally empties your list.
It's not possible to mark a todo as complete, or delete one, using the keyboard. Partly because you're not using an interactive control for marking as complete - it's not accessible to just have an onClick on the list item, you need either an
<input type="checkbox"/>
or a button witharia-pressed
state. Not sure why the delete button's not working though, that's a real button so should be ok. Edit: ah, it's because you've gotdisplay: none
on it. If you hide it withopacity: 0
instead, and give it a focus style, it should work.In general this is very good though. The code is nice and readable, and the structure of the app works well.
Marked as helpful
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