Building To-Do List App Using Vanilla JavaScript For Absolute Beginners

Preview of our To-Do app

The best way to learn something is by doing. In this tutorial, we will be building a To-Do List app using pure JavaScript. If you are a beginner and tired of studying from boring theoretical tutorials then you are in a right place because here we will practically build this To-Do app from scratch. Don’t worry I have explained each and every step to develop our To-do app.

In this app, we will be able to add new tasks to be done, delete tasks, mark tasks after completion, we will have a drop-down menu to filter our tasks on basis of completed or incomplete tasks.

So without any further delay let’s get started with the coding.

We have to create a folder and we have to create three files there:

1. index.html
2. styles.css
3. main.js

HTML file for our app

HTML File

As this tutorial mainly focuses on teaching JavaScript concepts, I assume that you must be familiar with the HTML syntax and easily understand above code but still we will discuss briefly about what’s happening in this html file.

In body tag of our file we have three main section: 1. Heading 2. Form 3.Task Container and at last we are just linking our JavaScript file.

Heading section as you already guessed contains title of our app.

In form section, we have an input element to enter a new task, a button to display that task below, a dropdown which filters our tasks on basis of completed or incomplete tasks.

In task container section we have all our tasks which are added to our page dynamically when user adds a task through JavaScript.

CSS file for styling

CSS File

This is my styling for our To-Do List app which you can easily understand by just reading once as I have also added comments specifying the role of the code. You can also come up with your own styling. And please send the link of your styling in comment section. I would love to see all of your creative styling.

JavaScript file for functionality

JavaScript File

Here comes the exciting part for which you guys are reading this. The JavaScript file is responsible for all the functionality of our app.

1. Storing Elements in constants

First let’s store html elements which we will use in different functionalities.

//selectors
const todoInput = document.querySelector('.todo_input');
const todoButton = document.querySelector('.todo_button');
const todoList = document.querySelector('.todo_list');
const filterOption = document.querySelector('.filter_todo');

Here, with the help of document.querySelector() method we are storing html elements with specific class to their respective constants. Now constants todoInput, todoButton, todoList, filterOption contains html elements.

2. Adding Event Listeners to elements

Now we will add click event listeners to our Buttons and Dropdown Filter.

//event listeners
todoButton.addEventListener("click", addTodo)
todoList.addEventListener("click", deleteCheck)
filterOption.addEventListener("click", filterTodo)

The addEventListener() method attaches an event handler to the specified element. Now when we will click ‘+’ button element in our input then addTodo function will execute. When we will click any task which is added in task container of our app then deleteCheck function will execute. When we will click select element (dropdown) in our app then filterTodo function will execute

3. Adding a Task with check button and delete button

function addTodo(event) {
event.preventDefault();
//todo DIV
const todoDiv = document.createElement('div');
todoDiv.classList.add('todo');
//todo LI
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo_item');
todoDiv.appendChild(newTodo);
if(todoInput.value === ""){
return null;
}
//check mark BUTTON
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add('complete_btn')
todoDiv.appendChild(completedButton);
//delete BUTTON
const deleteButton = document.createElement('button');
deleteButton.innerHTML = '<i class="fas fa-trash"></i>';
deleteButton.classList.add('delete_btn')
todoDiv.appendChild(deleteButton);
//Append to Actual LIST
todoList.appendChild(todoDiv);
//Clear todo input VALUE
todoInput.value = ""
}

This addTodo function will execute when the add button on input will be clicked. This function is responsible for adding a task, adding check button and adding delete button.

Firstly, we are calling event.preventDefault() method which cancels the event if it is cancelable. In our case as our add button is of submit type, when we click on this our page gets submitted and get refreshed and that’s something we don’t want in our application that is where event.preventDefault() method comes into play method prevent it from submitting the form.

Then with the help of document.createElement() method we are creating a html <div> element which will contain the task, check and delete button. Next we are creating html <li> which is our actual task which we are getting from todoInput.value which just takes whatever user types in input field and stores it in this <li> element. In the similar way we are creating both check and delete buttons. At last we are checking if our input field is not empty which means there is some task written there and if so, we are append our <li> (list) and both buttons in the <div> element we just created.

4. Deleting and checking the task accordingly

//DELETE & CHECK
function deleteCheck(e) {
const item = e.target;
//DELETE ITEM
if (item.classList[0] === "delete_btn") {
const todo = item.parentElement;
//ANIMATION TRANSITION
todo.classList.add("fall")
todo.addEventListener('transitionend', function () {
todo.remove()
})
}
//COMPLETE ITEM
if (item.classList[0] === "complete_btn") {
const todo = item.parentElement;
todo.classList.toggle("completedItem")
}
}

As we have added an event listener on our todoList <div>, whenever we will click on check or delete button this function will execute. However on clicking the task itself in the <div> also execute this function but as we are handling the situation when either of any button is clicked so clicking the task will not do anything.

In this function we are getting the target element using e.target. Then we are checking if the target element is delete button or check button. If it is delete button(delete_btn) then we are simply getting its parent element with .parentElement property and deleting it with the help of .remove() method after the transition is completed which is added by adding ‘fall’ class to the whole <div>. If we clcik on check button (complete_btn) then we are just toggling a class to the parent element that is <div> itself which will apply some styling to the task to confirm that this task is completed.

5. Filtering the tasks according to the selected option

//FILTERING THE TASKS ACCORDING THE OPTION
function filterTodo(e) {
const todos = todoList.childNodes;
for(let i = 1; i<todos.length; i++ ){
switch (e.target.value) {
case "all":
todos[i].style.display = "flex";
break;
case "completed":
if (todos[i].classList.contains('completedItem')) {
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
break;
case "uncompleted":
if (!todos[i].classList.contains('completedItem')) {
todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}
break;
}
}
}

When we click one of the options of dropdown then this filterTodo function will execute. This function is responsible for filtering the tasks on the basis of all tasks, completed and uncompleted tasks. In constant todos we are storing all the todo tasks. Then using for loop we are iterating over them . In the loop we are checking which option is clicked from the dropdown and just filtering the elements by implementing the display style to the todos.

For example:- If you clicked completed option of the dropdown then it will check which todos have class of completed_item and add a style of flex to it otherwise it will add style of display none to it.

todos[i].style.display = "flex";
} else {
todos[i].style.display = "none";
}

Other options filter the todos by the same method.

Now our application is working great without any problem.

That is all for today. I hope this was helpful for guys. I will be posting my ideas on various topics and we will build many cool apps together.

Good Day, Good Coding…

String And Number methods in JavaScript

String And Number methods in JavaScript.

Array methods in JavaScript

Array methods in JavaScript. array.map(), array.filter(), array.push(), array.shift() and much more