project lis and todo rows have ids now

src/index.js

@@ -6,7 +6,7 @@ import {Controller} from "./modules/controller";
 
 window.addEventListener("load", () => {
     const controller = new Controller();
-    controller.listenForProjectAdd();
-    controller.listenForTodoAdd();
-    controller.listenForProjects();
+    controller.initializeUI();
 });
+
+/* Next step: Display Todos associated with the active project */

src/modules/controller.js

@@ -19,13 +19,21 @@ class Controller {
     this.projectInputField = document.querySelector("#projectsInputField");
     this.addProjectButton = document.querySelector(".addProjectButton");
     this.currentProjectId = 0;
-    this.allCurrentProjects = document.querySelector("li");
   }
-
+
+  initializeUI(){
+    this.view.displayProjects(this.model.getProjects());
+    this.listenForProjects();
+    this.listenForProjectAdd();
+    this.listenForTodoAdd();
+  }
+
   listenForProjects() {
+    this.allCurrentProjects = Array.from(document.querySelectorAll("li"));
     this.allCurrentProjects?.forEach((project) => {
       project.addEventListener("click", (e) => {
         this.currentProjectId = e.target.getAttribute("id");
+        console.log(this.currentProjectId);
       });
     });
   }
@@ -35,13 +43,14 @@ class Controller {
       let projectTitle = this.projectInputField.value;
       this.model.addProject(projectTitle);
       this.view.displayProjects(this.model.getProjects());
+      this.listenForProjects();
     });
   }
 
   listenForTodoAdd() {
     this.addTodoButton.addEventListener("click", () => {
       let todoTitle = this.todoInputField.value;
-      this.model.addTodoToProject(this.currentProjectId);
+      this.model.addTodoToProject(this.currentProjectId, todoTitle);
       this.view.displayTodos(
         this.model.getProject(this.currentProjectId).getTodos()
       );

src/modules/model.js

@@ -9,22 +9,20 @@ class Model {
     }
 
     addProject(title){
-        console.log("inside model: add project");
         this.projectList.push(new Project(title));
     }
 
     getProject(id){
-        console.log(this.projectList[id]);
         return this.projectList[id];
     }
 
     getProjects(){
-        console.log("inside model: get projects");
         return this.projectList;
     }
 
     addTodoToProject(id, title, due, prio){
         this.projectList[id].addTodo(title,due,prio);
+        console.log(this.projectList);
     }
 
 }

src/modules/view.js

@@ -8,32 +8,34 @@ class View {
 
     displayProjects(currentProjectsList) {
       this.projectList.innerHTML = "";
+      let id = 0;
       currentProjectsList.forEach((project) => {
-        this.projectList.appendChild(this.createLi(project.title));
+        this.projectList.appendChild(this.createLi(project.title, id++));
       });
     }
 
-    createLi(projectTitle) {
+    createLi(projectTitle, id) {
       const newLi = document.createElement("li");
       newLi.textContent = projectTitle;
-      let id = parseInt(newLi.previousElementSibling?.getAttribute("id")) +1 || 0;
       newLi.setAttribute("id", id);
       return newLi;
     }
 
     displayTodos(currentTodoArray) {
       // Wipeout current list
       this.todoTable.innerHTML = "";
+      let id = 0;
       // loop through list
       currentTodoArray.forEach((todo) => {
         // Create and add a new row to the table
-        this.todoTable.appendChild(createRow(todo.title));
+        this.todoTable.appendChild(this.createRow(todo.title, id++));
       });
     }
 
-    createRow(title) {
+    createRow(title, id) {
       const newRow = document.createElement("tr");
       newRow.innerHTML = `<td>${title}</td>`;
+      newRow.setAttribute("id", id);
       return newRow;
     }
 }