To Do List Practice_1

my github repo

To Do List Practice_2 To Do List Practice_3 To Do List Practice_4

Introduction

This project is for practicing TypeScript.

setting

initial setting TypeScript Setting

code

First, get all variables in initial settings.

const todoList = document.getElementById("lists") as HTMLUListElement;
const inputListEle = document.getElementById("inputList") as HTMLInputElement;
const addBtn = document.getElementById("addBtn") as HTMLButtonElement;

addBtn.addEventListener("click", () => {
  const inputList = inputListEle.value;
  console.log(inputList);
});

If I don’t use as, TypeScript is not automatically aware of the type of that element.

I tested it and it works, so I will create add new list function.

function addNewList(text: string) {
  const li = document.createElement("li") as HTMLLIElement;
  li.textContent = text;
  todoList.appendChild(li);
}

and modify event listener function

addBtn.addEventListener("click", (e) => {
  const inputList = inputListEle.value;
  addNewList(inputList);
  inputListEle.value = "";
});

If I click the button, new list is created and appended.

I wrote css codes for done, removeBtn, and divBox for a list,

.listBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 20px;
  margin: 30px;
}
.done {
  opacity: 0.5;
  text-decoration: line-through;
}
.removeBtn {
  background-color: red;
  height: 20px;
  margin-right: 20px;
}

and

• Create checkBox, li, removeBtn
• Create div and add classList
• Append 3 elements to div
• Append div to todoList(ul)

function addNewList(text: string) {
  const checkBox = document.createElement("input") as HTMLInputElement;
  checkBox.type = "checkbox";

  const li = document.createElement("li") as HTMLLIElement;
  li.textContent = text;

  const removeBtn = document.createElement("button") as HTMLButtonElement;
  removeBtn.textContent = "Remove";
  removeBtn.classList.add("removeBtn");

  const listBox = document.createElement("div") as HTMLDivElement;
  listBox.classList.add("listBox");
  listBox.appendChild(checkBox);
  listBox.appendChild(li);
  listBox.appendChild(removeBtn);

  todoList.appendChild(listBox);
}

Now I see this screen.

I need to make checkBox, removeBtn work properly.

• When checkBox is clicked, apply done class.
• When removeBtn is clicked, remove the list.

Just add these in the add new list function.

checkBox.addEventListener("change", () => {
  li.classList.toggle("done", checkBox.checked);
  });
.
.
.
removeBtn.addEventListener("click", () => {
  listBox.remove();
});

If I click the checkBox,

and removeBtn also works.