Most difficult project so far!

FIXED AND DONE

Hi everyone!

I spent so many hours on this and I can't progress any further. Probably it's just a lack of knowledge or I don't understand some JS behaviours 😢

I designed it pretty fast, I have no problems with HTML and CSS, it's like breathing. Even if I don't know something I can google it easily. I made up my own idea of segregating and styling dark/light theme. Check it out and let me know if it is a proper way.

Then I programmed appearing text from Input on the list. Easy.

But when I tried to code delete buttons, my nightmare has started. I red, watched and tried 'normal' methods, array methods... Finally after 3hours I just coppied code from my previous 'Todo', which I was doing with one of the courses I watched. I tried to understand what I've just coppied, but Objects and Arrays are some black magic to me. I understand how to write them and which one is which, but I just can't use them by myself to code anything. I imagine that coding Completed, Active and All sections requires using 3 arrays, if I'm right... but how?

I wish I could learn this OOP in JS. But I can't find tutorials or courses that could explain to me in a way I can understand and remember...

This is my first solution in Intermediate level, but I can see now that it was too early for me 😢

If you have any sources of knowledge or some lessons I will appreciate your effort!

Thank you! ❤

EDIT #1: I fixed markAsCompleted function and now it adds class to each checked todo. I also implemented Clear Completed button logic, where it checks if todo-list has class named 'completed' and if it has, it should splice that todo from an array and render list without that todos. But... Check it out what is happening. I have no clue. I'm not even sure if renderTodoList() is appropiate function.