It’s 4am. The worst time. LT – 6 months old – is crying. Again. She last cried 40 minutes ago. And she cried 40 minutes before that. I’ve lost count and track of the times before. This is unusual. I’m not equipped for it.

But I’ve had enough. It’s late. Or is it early? I’ve had no sleep, and I have important things to do in the morning. (Not really, but they seem it at 4am.)

Six months. That’s old enough for her to be trying it on, isn’t it? This is beginning to feel like a tantrum. I’ll let her work it out by herself…

But she’s not stopping. She’s just working up to more and more distress. So I pick her up. Of course I do. And I hug, and I soothe, and I beg because I don’t know what else to do. She comes into our bed, and with some hugs and kisses and songs she eventually gets back off to sleep.

I look at the clock and decide I may as well get up. And I go to work, and I type, almost on autopilot. And I go to Smith’s where I forget to buy what I went in for, and leave my debit card in the machine when I go back in for the second time. And then I go home, tired, grumpy and dreading the night ahead.

“Her first tooth has come through!” my partner grins. And in six words, the confusion of the night before crystallises into sense. And I feel awful, because it wasn’t a tantrum, and I was a horrible Dad. And I realise those important things I had to do were, in fact, minuscule.

And I feel wonderful because she’s growing up and I’m there to see it.

I go to her, and she looks at me, and beams that big toothless grin – not so toothless now – and I sit beside her, and she reaches out and rests her hand on me. And whatever she’s capable of thinking or feeling, I feel welcome, forgiven and loved.

#notes #november2014

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.

A long time after ChatGPT release, we heavily depending on all kinds of AI products.

• At the end of my college year, 80% of my paper was written by AI.
• After having a job(which is writting script), I use it to coding and give up coding myself.
• During AdventureX 2025, most of the products(including ours) here were created by AI.
• Even some Art Gallery start to put some so-called “AI-generated art” to show.
• Lots of “vibe coders” emege, develop software seems a thing that everyone could do.

We are so damn rely it that we almost lost our own thinking.

Of course I know someone will argue: “then why don't you criticise Google, Facebook, or Tiktok?” My answer is, they only change the way we see the infomation. Or worst, they just push what we wanna hear or see, we could still read the other media. But using AI, most of people will lost their thinking ability.

Don't use, you lose. When AI start its deep thinking, who the hell will think by themself? Once people are not thinking by themself, they are just a AI-prompt speaker, say what AI say, do what AI suggest.

Here is a talk from TED, it hold the same point with me.