Conversation
…tion and make sure that the logic works. Also add a new favicon
…round to the whole page. And also, change so that Add a to-do is in the bottom of the todo list as well as updated app.jsx so that the skeleton component is removed when pushing add a to-do
…with label for checkbox and aria-label on buttons. Change colors for when a todo is overdue, and also on add a to-do for better contrast
…olors for dark mode
Npahlfer
left a comment
Npahlfer
left a comment
There was a problem hiding this comment.
Great job on the todo app! The dark‑mode toggle with the icon and smooth transition to a dark background is a nice touch for accessibility and personalization. . I like the empty‑state UX: a friendly message with the skeleton placeholder keeps the app from feeling blank.
The form is a strong stretch goal win, adding text, a category select, and a date picker is handy for real‑world use, and storing the date as an ISO string while formatting it with date‑fns keeps data handling clean. Showing the created date, due date, and an overdue badge in each item is great for quick status checks. The use of framer‑motion for entry animation gives the list a polished feel.
Also good that you are persisting the store with zustand and the completeAllTodos button in the heading is a nice touch.
A small cleanup note: the completeTodo action in the store isn’t used anywhere (you toggle completion via toggleTodo), so it could be removed to keep the codebase lean and tidy. Likewise, the categories array is defined but not currently used. If you plan to use it elsewhere, thats fine, otherwise you could drop it.
Overall, the app hits every requirement with a few great stretch goals. The code is readable, the UI is responsive and accessible, and the developer experience is solid. Keep up the good work!
2 participants
Live demo