Task Tracker Live
Tools used: HTML, CSS, JavaScript, Webpack, Date-fns
When making this app, I tried to focus on seperation of concerns and the single responsibility principle. Webpack allowed me to create modules and further separate the code based on the function it provided. render.js is where, you guessed it, functions that affect the visual display of the DOM live. logic.js houses all functions that manage and affect the applications data. events.js is where the two come together. As an example, when a user clicks a button, the event listener triggers a function to change the data, and when the data is changed a re-render is triggred which now reflects this change.
This app was a great learning experience. I'm really grateful that The Odin Project introduced the SOLID design principles and demonstrated the application of these principles in a JavaScript context. Had I not been exposed to them, the code would not have been as organized or easy to work with.