To-do Application

Description

This is my first vanilla JS project with separation of concerns using OOP and other abstract patterns, like factory functions and module pattern.

Problems Faced

This is my first big vanilla js project. The goal was to implement the app while making the code as modular as possible (using factory funcitons and IIFEs). I faced two problems with that. The first one was about adhering to DRY principle, not leaving anything in the global space, and making everything modular. The second problem was understanding and using closures properly: I needed to pass manupulate the state in a complicated manner, passing functions and variables, which are scoped within those functions, around. And since I don't have a lot of control over the functions that manipulate DOM, I struggled with passing the state of DOM elements around.

What I did

I couldn't solve the first issue immediately. Because I was very early on my JS journey, I didn't know what first-order functions were and how scoping worked in details, and I didn't even know that I didn't know it, and because of that I couldn't make the code DRY immediately. So, I completed the project the way I could (making it barely functional), read a book from You Don't Know Javascript series about scoping and closures, went back and refactored the code to adhere to those principles. To not leave anything in the global scope and make the code modular, I learned about the factory funciton pattern and the module pattern (IIFE), and I connected them using an interface module. The issue of closures was also solved after reading the aforementioned book. I started encapsulating the state of DOM elements in functions and then pass those functions where I needed.