javascript – To Do List Project – app lets you make projects and inside of this projects you can save to-dos


I have built a To Do App in Javascript, using Webpack and some modules. The app lets you store projects (School, Sport, Grocery, etc.)… And inside these projects, you can store todo items… You can also edit the todo item, and click it do delete/finish it.

The app should be built with OOP principles in mind, and that’s the main concern with the code, and the reason that I want it to be reviewed. This is the weakness of my code. And I would want you to give me tips on how to improve this…

It is my first post here… I hope I followed all the rules. And that is why I posted only the following code here, and shared my github repo if there is a person generous to look into it.

Github repo! (Posted it because of webpack…)

Index.js:

if (myProjects.length == 0) {
  defaultProject();
}
//defaultProject();
// Add new project!

newProjectListener.addEventListener("submit", (event) => {
  event.preventDefault();
  const newProjectTitle = document.getElementById("newProjectName").value;

  if (newProjectTitle == "") {
  } else {
    newProjectEvent(event);
    addProjectUI(newProject);
   // saveToLocalStorage(myProjects);
    emptyForm();
  }
});

// Delete project, adding event listeners to all future trash buttons for projects...
window.addEventListener("click", (event) => {
  let element = event.target.classList.contains("bi-trash")
    ? event.target.parentElement
    : event.target.classList.contains("trash-project")
    ? event.target
    : false;
  if (element) {
    let itemToRemove = element.parentElement.parentElement;
    deleteProject(itemToRemove);
    deleteItemUI(itemToRemove);
    cleanToDoView();
    // localStorage.clear();
    // saveToLocalStorage(myProjects);
  }
});

// clicked project

projectListDiv.addEventListener("click", (event) => {
  if (event.target.tagName == "P") {
    resetClickedProject();
    clickedProject(event);
    clickedProjectIndex = idClickedProject(event);
    cleanToDoView();
    render();
  }
});

// new to do...
newToDoListener.addEventListener("submit", (event) => {
  event.preventDefault();
  if (
    toDoTitle.value == "" ||
    description.value == "" ||
    dueDate.value == "" ||
    priority.value == "" ||
    note.value == ""
  ) {
  } else {
    newToDoEvent(event, clickedProjectIndex);
    let toDo = newToDo;
    appendToDo(toDo);
    // localStorage.clear();
    // saveToLocalStorage(myProjects);
    emptyToDoForm();
  }
});

tableListener.addEventListener("click", (event) => {
  let element = event.target.classList.contains("delete")
    ? event.target.parentElement.parentElement
    : event.target.classList.contains("fa-check")
    ? event.target.parentElement.parentElement.parentElement
    : false;
  if (element) {
    let deleteItem = element;
    deleteToDoFromObject(deleteItem, clickedProjectIndex);
    deletToDoUI(deleteItem);
    // localStorage.clear();
    // saveToLocalStorage(myProjects);
  }
});

window.addEventListener("click", (event) => {
  let element = event.target.classList.contains("edit-button")
    ? event.target.parentElement.parentElement
    : event.target.classList.contains("fa-pencil-square-o")
    ? event.target.parentElement.parentElement.parentElement
    : false;
  if (element) {
    toDoIndex = clickedToDoIndex(event, element);
    editTodo(clickedProjectIndex, toDoIndex);
  }
});

editToDo.addEventListener("submit", (event) => {
  event.preventDefault();
  editFinish(clickedProjectIndex, toDoIndex);
  cleanToDoView();
  render();
  // localStorage.clear();
  // saveToLocalStorage(myProjects);
});

const render = () => {
  myProjects(clickedProjectIndex).toDos.forEach((todo) => {
    appendToDo(todo);
  });
};

const initialLoad = () => {
  myProjects.forEach((project) => {
    addProjectUI(project);
    console.log(project)
    const projectHeader = document.querySelector(".projectName");
    projectHeader.textContent = project.title
  });
};
initialLoad();

const initalTodoLoad = () => {
  myProjects(0).toDos.forEach((todo) => {
    appendToDo(todo);
  });
};
initalTodoLoad();

projectFactory.js:

let myProjects = ();
let newProject;
// let myProjects = localStorage.getItem("projects")
//   ? JSON.parse(localStorage.getItem("projects"))
//   : (
    
//   );


const saveToLocalStorage = () => {
  localStorage.setItem("projects", JSON.stringify(myProjects));
};


// Project factory, which takes in title and makes toDo array, to which the toDos will be added...
const newProjectFactory = (id, title) => {
  const toDos = ();

  const add_toDo = (toDo) => {
    toDos.push(toDo);
  };

  return { id, title, toDos, add_toDo };
};

const newProjectEvent = (event) => {
  // DOM elements of form ...
  event.preventDefault();
  const newProjectTitle = document.getElementById("newProjectName").value;

  let ID;
  if (myProjects.length > 0) {
    ID = myProjects(myProjects.length - 1).id + 1;
  } else {
    ID = 0;
  }

  newProject = newProjectFactory(ID, newProjectTitle);

  myProjects.push(newProject);
  
};