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:

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.

//selectorsconst 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 listenerstodoButton.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 DIVconst todoDiv = document.createElement('div');todoDiv.classList.add('todo');//todo LIconst newTodo = document.createElement('li');newTodo.innerText = todoInput.value;newTodo.classList.add('todo_item');todoDiv.appendChild(newTodo);if(todoInput.value === ""){return null;}//check mark BUTTONconst completedButton = document.createElement('button');completedButton.innerHTML = '<i class="fas fa-check"></i>';completedButton.classList.add('complete_btn')todoDiv.appendChild(completedButton);//delete BUTTONconst deleteButton = document.createElement('button');deleteButton.innerHTML = '<i class="fas fa-trash"></i>';deleteButton.classList.add('delete_btn')todoDiv.appendChild(deleteButton);//Append to Actual LISTtodoList.appendChild(todoDiv);//Clear todo input VALUEtodoInput.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 & CHECKfunction deleteCheck(e) {const item = e.target;//DELETE ITEMif (item.classList[0] === "delete_btn") {const todo = item.parentElement;//ANIMATION TRANSITIONtodo.classList.add("fall")todo.addEventListener('transitionend', function () {todo.remove()})}//COMPLETE ITEMif (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 OPTIONfunction 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…

Computer Science Student, Front-end developer, love photography and paintings, now a blogger too i guess.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store