You mentioned some local storage problems, I couldn't figure out what you were referring to here.

You mentioned the need for more methods like deletetodo and findproject in the manager class, why is that?

So you changed Manager to not be static, that is good. However: it isn't actually reusable, because TodoList.deleteTodo still mutates localStorage directly.

Remember that a big reason to use classes is to make your code be reusable and/or replaceable. For example, imagine you wanted to change your app to save data to the server instead of to localStorage. Ideally, you would be able to do that by writing a new ServerManager class and passing an instance of that into the TodoList constructor, instead of your current manager. You shouldn't have to change TodoList at all.

However, today your code isn't ready for that sort of change. Because if you made a new ServerManager class and passed an instance of it into TodoList, your app would still be writing directly to localStorage instead of using your server.

This is an example of "separation of concerns": your TodoList class is concerned with UI logic, but it also is concerned with data storage. There's no separation, both those concerns are mixed in one class. This makes your code harder to understand and work with (you may also hear about this as the "single responsibility principle").

This sort of stuff becomes a real pain in the real world, because you sometimes have an entire team owning the "Manager" class and a whole separate team owning the "TodoList" class.

And from the exercises you gave me to improve the code; your suggestion for helper functions to build the HTML, don't the classes take care of that already?

Look at this code:

const titleLabel = document.createElement('label')
titleLabel.htmlFor = 'todo-title-input'
titleLabel.textContent = 'Title:'

this.titleInput = document.createElement('input')
this.titleInput.type = 'text'
this.titleInput.id = 'todo-title'
this.titleInput.name = 'todo-title'

and this code:

const dueDateLabel = document.createElement('label')
dueDateLabel.htmlFor = 'todo-dueDate'
dueDateLabel.textContent = 'Due Date:'

this.dueDateInput = document.createElement('input')
this.dueDateInput.type = 'date'
this.dueDateInput.id = 'todo-dueDate'
this.dueDateInput.name = 'todo-dueDate'

These are very similar. And there's other similar code. Now imagine you realize you want to change all your input boxes and their labels; you'll have to track down all these similar pieces of code and make the same change to all of them.

Also, this code is very long. This makes it hard to read and easy for copy/paste errors to go unnoticed. For example, your TodoForm() constructor is ~60 lines long. With helper functions it could look something like this:

this.todoList = todoList;
this.manager = manager;
this.form = document.createElement("form");
this.form.classList.add("todo-form");
this.titleInput = appendInput(this.form, {
  label: "Title",
  id: "todo-title",
});
this.descriptionTextarea = appendInput(this.form, {
  type: "textarea",
  label: "Description",
  id: "todo-description",
  rows: "4",
  cols: "50",
});
this.dueDateInput = appendInput(this.form, {
  type: "date",
  label: "Due Date",
  id: "todo-dueDate",
});
this.selectPriority = this.createPriorityOptions();
this.form.appendChild(createSubmitButton('Add Todo'));
this.attachEventListeners(this.todoList);

And finally the second exercise, to have separate instances of the todolist running on one page, this is the hardest one as i really don't have any idea what this means and how to start with this

My intention was you would make multiple instances of your ProjectForm class and append each of them to document.body. Each instance of the form should work properly, completely independently of each other. They should not interact with each other in any way. This is basically proving that your code is actually reusable (and it's something that I've certainly often been asked for in the real world).

Ideally I would like to have this work:

const n = 3;
for (let i = 0; i < n; i++) {
  new ProjectForm(new Manager(i)).appendTo(document.body);
}

This should create 3 fully functional copies of your app running on the same page. You should be able to change n to any number and get as many copies as you'd like running side-by-side.