Skip to content
Submitted over 3 years ago

Responsive Application using ReactJS

Usmonbek Rustamov•235
@usmonbek-umarbekovich
A solution to the Todo app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Thank you for checking out my solution. Feedbacks are welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Alex•2,010
    @AlexKMarshall

    This looks and works great. I only have a couple of comments.

    I'd wrap the JSON.parse call in a try/catch as it can throw. The todos should probably be in an <ul> with the todos being <li> elements.

    There are quite a few divs that pretend to be buttons. This makes them inaccessible using the keyboard. We shouldn't attach onClick handlers to non-interactive elements like divs. They should be real buttons. This applies to deleting todos, changing the theme and filtering the todos.

    The checkbox for marking a todo complete can be used by the keyboard, but it's missing a focus-visible style to show you which todo you're interacting with.

    I'm very impressed with the drag and drop being written from scratch, and it works great with a mouse. But it's also not keyboard-accessible. That would be hard to do by hand I expect. I used dnd-kit to do it.

    Marked as helpful
  • favori•0
    @favori-ncrypt

    ccol font, nice ui

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