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.

CSS Output

JavaScript Code

//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");
//event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);
//functions

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 = "";
}

//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");
  }
}
//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;
    }
  }
}

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

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.

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.

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

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.

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.

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.

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.

Final Output