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

Preview of our To-Do app
  1. styles.css
  2. main.js

HTML file for our app

HTML File

CSS file for styling

CSS File

JavaScript file for functionality

JavaScript File

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');

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)

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

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

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;}}}
todos[i].style.display = "flex";} else {todos[i].style.display = "none";}

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