@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
@Jesuloba-world
Posted
@A-amon Hello, can you check out mine too 😀