So I’m doing the Todo List project on TheOdinProject Javascript course and one of the topics before that was about SOLID, but mainly the single responsibility principle that I should incorporate into the project. However, I’m just not fully understanding how to make it work for my project so would really appreciate some input.

For context here’s what my layout looks like:

r/webdev - Struggling to understand how to structure my code according to the solid responsibility principle

Layout of project

On the left hand side I have the project explorer that contains a list of projects that you can click to reveal the todo lists in each project.

On the right you have the todo list tabs and the editor.

A project simply contains the name of the project and a list of it’s todo items (Does this break the principle?) and the todo item contains a title and a string for text right now.

Now my OOP brain immediately told me to have a project module/class and a todo list module/class to store data and generate the DOM and other stuff in there, but obviously this breaks the single responsibility principle. So I decided to have a project data and project DOM class and the same with the todo items. The data class would (obviously) store the data for each project/todo and the dom would be used to generate, update or destroy the tabs.

When I start I generate mock todo lists and mock projects and add the todo lists to the projects. Then I need to generate the project tab which includes generating the little document tabs for each todo item in the project too. Currently I’m doing this in the same class projectDOM. Then for each todo item I’m generating the tabs for the right side in the todoDOM and I’m appending all the tabs to the respective places. Now my problem comes with adding event listeners like when I click a document on the left, I want to open the tab on the right. This means adding an event listener to the document links in the projectDOM class with a function for generating a tab in the todoDOM class which, again, seems to me like it’s breaking the single responsibility principle. Same if I want to edit the title of a document, then I need to access the projectDOM to change the document link name too.

I’m sorry if my explanation was confusing or I’m being an idiot but I’m just struggling to get my head clear and think how to structure this all in a organised and modular fashion that respects the S in SOLID.

Source link

Write A Comment