Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

CRUD Todo App with Redux Toolkit and Tailwind CSS

#react#tailwind-css#redux-toolkit

@pqhung3007

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello Frontend Mentor community 👋

This is the first time I really get my hands dirty with Redux Toolkit, a great global state management tool and there's nothing better than applying it to a simple, conventional to-do app. Apart from the challenge's requirements, I add the edit functionality and make a toast notification pops up every time a to-do is added or updated using the react-toastify package. I also use localStorage to save to-dos so that they don't disappear when we reload the page.

If you're satisfied with my product and my code, feel free to save it for future reference. On top of that, I also welcome constructive feedback or even critics so we can better improve. 💪

Happy coding everyone! 💻

Community feedback

Cường 845

@docuong0912

Posted

i think there's little problem with the total task, it keep decreasing everytime i click the task even it's unfinished

0

@pqhung3007

Posted

@docuong0912 Hello Cường. Mình nói tiếng việt luôn cho tiện nhé.

Đúng là phần khi check hoàn thành 1 task thì số task còn lại sẽ giảm đi 1. Nhưng mình chưa tìm được cách để vô hiệu hóa nút bấm vào 1 task đã hoàn thành để không dispatch action được nữa. Bạn có thể xem qua code của mình xem có hướng nào không nhé.

0
Cường 845

@docuong0912

Posted

@pqhung3007 ở chỗ <p>{activeTodos.length} tasks left</p> tui nghĩ là lấy allTodo length - completedTodo

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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