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

TodoList with React JS

@gabrielcavdias

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


Any feedback on how to improve the code will be helpful, it was my first ReactJS project so I was struggling with boilerplate code.

I think the "Active"/"Completed"/"All" filter was a little bit hardcoded and I couldn't think of any idea on how to make the code shorter on that part.

Community feedback

Amon 2,560

@A-amon

Posted

Hello! Nicely done~ 😀

I have a few suggestions:

  • I noticed the text in your .todoList__controls are wrapped up in between 768px and 1024px (based on devtools) 🤔

  • About the React code, don't trust my word on my suggestions though. Use it if you feel it makes sense. 😂

  • The Todo.js seems really messy. You can split the header (todo logo and light/dark mode toggle) and list item into their own components. 🧱🧱

  • One alternative I could think of now to prevent mixing up the UI code and the logic would be, instead of doing the comparison whether the list item is part of the filtered items among the UI code e.g. todoList.filter(...) and let itemsReference = ... It would be better to have a function to do it. For example, having a function when one of the filter buttons is clicked. Inside it, you could filter the todoList state. When the state changes, the list item should update accordingly to it. This way, you should only need 1 loop. 😀 I hope you get what I'm trying to say.

  • You can put null (If I remember correctly 😂) if you want to just add/remove .current__filter class. This way, you just need one class to do the job.

  • .mobileFilters inline styles seem more suitable to be done using CSS media queries.

Marked as helpful

2

@Jesuloba-world

Posted

@A-amon Hello, can you check out mine too 😀

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