To-Do List App Using Vanilla JavaScript For Absolute Beginners

To-Do List App Using Vanilla JavaScript For Absolute Beginners

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 Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>To-Do List App</title>
  </head>
  <body>
    <!-- TITLE -->
    <header>
      <h1>WORKS TO BE DONE</h1>
    </header>
    <!-- INPUT FIELD TO ENTER TASK AND DROPDOWN FILTER -->
    <form>
      <input type="text" placeholder="Enter The Work" class="todo_input" />
      <button class="todo_button" type="submit">
        <i class="fas fa-plus-square"></i>
      </button>
      <div class="select">
        <select name="todos" class="filter_todo">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
    <!-- CONTAINER FOR DISPLAYING TO-DO LIST BY ADDING TASKS DYNAMICALLY USING JAVASCRIPT -->
    <div class="todo_container">
      <ul class="todo_list"></ul>
    </div>
    <!-- ADDING JAVA SCRIPT -->
    <script src="./app.js"></script>
  </body>
</html>

You Might Like This:

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.

HTML Output

To-Do List App Using Vanilla JavaScript For Absolute Beginners2   
To-Do List App Using Vanilla JavaScript For Absolute Beginners2

CSS Code

/* REMOVING THE DEFAULT STYLINGS FROM THE PAGE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* ADDING BACKGROUND COLOR, FONT  FAMILY, FOREGROUND COLOR AND MINIMUN HEIGHT TO OUR PAGE  */
body {
  background-image: linear-gradient(120deg, #5f57d1, #c065c0);
  font-family: "Poppins", sans-serif;
  color: white;
  min-height: 100vh;
}

/* STYLYING INPUT ELEMENT AND TH EBUTTON */
header,
form {
  display: flex;
  min-height: 15vh;
  justify-content: center;
  align-items: center;
}
form input,
form button {
  padding: 0.4rem;
  border: none;
  font-size: 1.6rem;
  background: white;
}
form button {
  color: #c065c0;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}
form button:hover {
  background: #c065c0;
  color: white;
}
/* STYLING DROPDOWN */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}
.select {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}
select {
  color: #c065c0;
  width: 8rem;
  cursor: pointer;
  padding: 0.7rem;
}
.select::after {
  content: "\25bc";
  position: absolute;
  color: #c065c0;
  top: 7px;
  right: 6px;
  pointer-events: none;
}
.select:hover::after {
  color: #583429;
}

/* STYLING CONTAINER WHERE THE TASKS ARE SHOWN */
.todo_container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.todo_list {
  min-width: 40%;
  list-style: none;
}

.todo {
  margin: 5px auto;
  background: white;
  color: #000000;
  display: flex;
  font-size: 1.2rem;
  padding: 0.3rem;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s ease;
}

.todo li {
  flex: 1;
}

/* STYLING THE BUTTONS ON THE TASKS  */
.complete_btn,
.delete_btn {
  padding: 0.5rem;
  background: #ff3700;
  color: white;
  border: none;
  margin-left: 0.2rem;
  cursor: pointer;
  font-size: 1rem;
}

.complete_btn {
  background: rgb(67, 179, 67);
}
.complete_btn:active {
  background: green;
}

.delete_btn:active {
  background: #b65337;
}

.fa-trash,
.fa-check {
  pointer-events: none;
}

/* STYLING TASK THAT IS COMPLETED */
.completedItem {
  text-decoration: line-through;
  opacity: 0.5;
  transform: scale(0.96);
}
/* DELETING THE TASKS */
.fall {
  transform: translateY(4rem) scale(0.4) rotateZ(20deg);
  opacity: 0;
}

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

To-Do List App Using Vanilla JavaScript For Absolute Beginners3

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 todoInputtodoButtontodoListfilterOption 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 todoInputtodoButtontodoListfilterOption 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 

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

Share on:

Leave a Comment