In learning to build a todo list app, I had to think of each step gradually. What essentially is a todo list app? First, it must have a field to collect data. This would be the input field. Also, we should be able to delete items off it, or cross things that are marked as completed.
So, there should be a form, an area to display the todo lists as well as some kind of menu to be able to select what lists we wish to see; those marked as completed or all of them.
The form I learnt to build was a simple one, it contained the input field as well as a submit button with the ‘plus’ icon to be able to add new new lists. The select field contained three options for filtering things outs; all, completed and uncompleted.
I learnt to write a function to add To-dos. Since clicking on the ‘submit button’ in the form was the way to do this, it was necessary to prevent the default behaviour of the form which is to refresh the page. The way to do this is by typing e.preventDefault(). As the todos are basically unordered elements, I learnt how to append new ‘li’s’ to them.
This < li > was assigned an innerText value that was gotten from the form input element. Since this was grabbed in the DOM and stored in a todoInput variable, it’s value was simply retrieved by typing todoInput.value.
Also, within the body of this function, the created < li > element was appended to a created < div >. In addition, the buttons with the completed and trash icons were also appended to the div to which the < li > elements were appended to. Lots of appending going on here. Finally, this div with the < li > elements and buttons was appended to the < ul > element initially set in the html file.
I learnt how to write a new function to delete one of the todos. This function took the event as a parameter. Events have targets and since we wanted the target of the trash button icon to be able to remove a todo from the DOM, we needed to find a way to store that in order to be able to remove it. Storing it in a constant was something like this :
const item = e.target;
So, to make this work, if the first target which would be item with a classList of index[0](since they had classes set to identify them), was a trash button icon, then a list would be deleted. As the trash and completed buttons were embedded in a parent < div >, we needed to select the parent of the item. This was something like:
const todo = item.parentElement;
A simple version of this code looks like this:
const item = e.target;
if (item.classList[0] === "trash-btn") {
const todo = item.parentElement;
todo.remove();
}
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}
}
Filtering todos also required a function which also took an event as a parameter. Here, I learnt how to use childNodes to be able to get all the children of the < ul > element with the appended div containing the DOM injected < li > elements.
const todos = todoList.childNodes;
Further learnt how to loop through the todos and to use a switch statement for filtering out the event.target.value of the events in the function’s parameter.
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo) {
switch (e.target.value) {
case "all":
todo.style.display = "flex";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
}
});
}
Basically, everything that contains any of the cases when selected should be displayed, else it should not be displayed.
This is one way of building a todolist app that I enjoyed.
You can watch how to do this yourself on DevEd’s youtube channel.
Useful CSS property I learnt here was pointer-events:none;
This was used to prevent the trash and completed icons from interfering when we clicked on the buttons in which they were embedded. Without this property, we needed to click very close to the edge of the buttons to be able to have the click event triggered. With the property set, the click event would be triggered on any part of the button, making life a lot easier.