the origin repo is here.

this note records my questions and solutions of this project.

First two questions are:

• what is the code const todoInput = document.querySelector(".todo-input") try to do?
• what “event listeners” are (like the addEventListener parts)? or who listening the event?

The first one is to use dot selector to pass the todo-input-related to todoInput, and the code could use it for event listening logic writing. The second one is the browser that listening the event, the event listeners maybe a process of a browser, and when the code which contain addEventListener, browser then create a process for event listen. but actually I'm not sure the explain is right or not.

The whole things are: user write the content, and click the so called Send button, browser listening this button event, cuz the JS code we write is running in the browser, and the browser know, then execute the specific function, for example, addTodo.

Then another question is: if don't create div tag, what will happen?

If we change the code in addTodo from this:

todoDiv.appendChild(newTodo);
todoDiv.appendChild(completedButton);
todoDiv.appendChild(trashButton);
todoList.appendChild(todoDiv);

to this:

todoList.appendChild(newTodo);
todoList.appendChild(completedButton);
todoList.appendChild(trashButton);

which mean directly put the Send button, Delete button, and div on todoList. we could see: after changing the code, those three are divided, much ugly. Although I don't know why I refresh the page and everything become normal(maybe the browser is correcting my code).

Refactor

After read the function of getTodos, I know why after refresh. The page become normal because after refresh, the getTodos function is called, and there also a create todo logic in it, since there the logic is right, the page will still perform right.

But this also come up an issue that, there are repetitive codes in addTodo and getTodos, we can DRY that code.

I DRY that code myself, but seems some bugs occur, so I think I should read twice before coding.

Before, the functions addTodo and getTodos are looked like this:

function addTodo(e) {
  e.preventDefault();
  
  // Create todo div
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
  
  // Create list
  const newTodo = document.createElement("li");
  newTodo.innerText = todoInput.value;
  
  // Save to local
  saveLocalTodos(todoInput.value);
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);
  todoInput.value = "";
  
  // Create Completed Button
  const completedButton = document.createElement("button");
  completedButton.innerHTML = `✓`;
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);
  
  // Create trash button
  const trashButton = document.createElement("button");
  trashButton.innerHTML = `✗`;
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);
  
  // Final Todo
  todoList.appendChild(todoDiv);
}

function getTodos() {
  let todos;
  
  if (localStorage.getItem("todos") === null) {
    todos = [];
  } else {
    todos = JSON.parse(localStorage.getItem("todos"));
  }
  
  todos.forEach(function (todo) {
    // Create todo div
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    
    // Create list
    const newTodo = document.createElement("li");
    newTodo.innerText = todo;
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
    todoInput.value = "";
    
    // Create Completed Button
    const completedButton = document.createElement("button");
    completedButton.innerHTML = `✓`;
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);
    
    // Create trash button
    const trashButton = document.createElement("button");
    trashButton.innerHTML = `✗`;
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    // Final Todo
    todoList.appendChild(todoDiv);
  });

I think it's hard to refactor now, at least at this form.

About these code, here are some questions:

• what is 'e' and what is preventDefault do?
• why we need todoInput.value = "";

As we all know, when a button is submit type, its default action is submit the form to the remote server. But since here we only use local memory to keep the todo list, so don't need to do that. And the 'e' here is just a parameter to pass the related variable of clicking event define by browser.

Delete Myth

After commenting out the style.css link in index.html, I find a strange problem of this code: when I input, submit, and delete the note, it didn't delete at once, but after a refresh. Code is here:

function deleteTodo(e) {
  const item = e.target;

  if (item.classList[0] === "trash-btn") {
    const todo = item.parentElement;
    
    todo.classList.add("fall");
    todo.classList.add("completed");
    removeLocalTodos(todo);
    
    todo.addEventListener("transitionend", (e) => {
      todo.remove();
    });
  }
  
  if (item.classList[0] === "complete-btn") {
    const todo = item.parentElement;
    
    todo.classList.toggle("completed");
  }
}

Here I use console.log to test what is item, and found it is button. But something beyond my surprise:

const todo = item.parentElement;
console.log(todo)
todo.classList.add("fall");
todo.classList.add("completed");
console.log(todo)
removeLocalTodos(todo);

The first and the second log show the same content! which is a div have 3 class.

Last Word

Well, this project is poorly written, I give up reading it. Never, ever, read a rubbish project.