How to create multiple todolists using a save button?

by

Below is a snippet of some of my code. Think a todo list on steriods. I am trying to create multiple Div elements that save to a page that contain a different list every time my "Save button is pressed. whats actually happening is that multiple divs are showing but the original div saved is the only one that gets updated with the list information(so like in a todo list when you click submit a new list item appears ive added a save button and an input field that the user can use to name their list and saves that list to a container but only one div gets updated). I know i’m almost there but ive been looking at this for a couple of hours now and cant quite figure it out. https://github.com/W33K5Y/TODO-PIRPLE

const saveButton = document.getElementById("submit-save");
const myLists = document.getElementById("my-lists");
const startNote = document.getElementById("start-note");
const listName = document.getElementById("new-list-name");
const myUl = document.getElementById("my-ul-lists");

// ! savebutton listener
saveButton.addEventListener("click", addNewTodo);
// ! make new html elements
const newTodoOl = document.createElement("ol");
const newTodoLi = document.createElement("li");
const listH1 = document.createElement("h4");

// ! =============== function for creating new todo ================================
function addNewTodo() {
  const todoDiv = document.querySelector(".todo-container");
  const todos = document.querySelectorAll(".todo-item");
  todos.forEach(function(todo) {
    createLi(todo);
  });
  listName.value ? listH1.innerText = listName.value : listH1.innerText = "My List";
  newTodoDivWrap.classList.add("new-todo-div");
  newTodoDivWrap.appendChild(listH1);
  newTodoDivWrap.appendChild(newTodoOl);
  myLists.appendChild(newTodoDivWrap);
  todoReset(todoDiv, startNote);
  startLoginSignUpNoneLobbyFlex();
}

// todo function to go in above that removes all of whats in the tido-container

function todoReset(div, lobbyDiv) {
  lobbyDiv.remove();
  div.firstElementChild.innerHTML = "";
}

function createLi(todo) {
  // ! Create LI
  const newTodo = document.createElement('li');
  newTodo.innerText = todo.innerText;
  newTodo.classList.add("todo-saved-item");
  newTodoOl.appendChild(newTodo);
}

37 thoughts on “How to create multiple todolists using a save button?”

Leave a Comment