To- Do List App | JavaScript
This To-Do List will have the day-to-day things you want to do, not only that it will show what you have done or are yet to do! Of course, in the end, you will also get to delete a few which you have done or do not want on the To-Do List anymore.
Overview
We will learn about HTML, CSS, and JavaScript which will give us an end product of a personal To-Do List. You can add different colors, animations, icons, and more!
Prerequisite
A little bit of knowledge on events and event handling on JavaScript along with animation through CSS to make understanding easier.
Setting up IDE
You would need these files:
- index.html
- script.js
- style.css
for HTML, JavaScript, and CSS respectively. So we will work on them to build our To-Do List.
HTML file
HTML gives the structure to our web page. Here in the first line, we have <!DOCTYPE html> which is used for specifying the version of HTML the document is using. Next, we have the <title> tag which specifies the title of our web page that will be shown on the tab bar. Then we have <body> a tag that contains the main visible part of our web page. Make sure that all the code you write is included between the opening and closing tags. ( <body></body> ) Inside the body of the file we will declare a few tags, which will be useful for different purposes, such as
headerto provide a name.inputto provide a place from where we will get the elements to put it on our list.divwith typeselectthis will have options to sort the completed, incomplete, and all the lists.- Another
divwill haveula tag that will get the values from JavaScript.
NOTE Link fontawesome in head of the HTML file to get access to icons.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />Code:
<body>
<div class="message">
<span class="fas fa-exclamation-circle"></span>
<span class="msg"> It is a blank text</span>
</div>
<header>
<h1>Shibam's ToDo List</h1>
</header>
<form>
<input type="text" 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>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="./app.js"></script>
</body>
In the above code, we have used an icon for a down arrow to activate and display the drop-down option of sorting the list. We have completed the HTML part successfully.
CSS file
After you have completed the HTML part, you'll notice that when you click the "Run" button at the top, you just see a white screen with some texts and that is it. Now, we make it look better and more attractive with colors and effects, We have to think for the future here So this is the tricky part, here what I meant is that we have to think ahead about when we will have the lists and then how we want to display them.
We get to add icons of trash and tick sign to delete it and mark it complete respectively. So, we have to put CSS for that too.
Code:
.todo {
margin: 0.5rem;
background-color: white;
color: black;
display: flex;
justify-content: space-evenly;
font-size: 1.5rem;
align-items: center;
transition: all 0.5s ease;
}
.trash-btn,
.complete-btn {
background-color: rgb(243, 171, 62);
color: white;
font-size: 1rem;
padding: 1rem;
border: none;
cursor: pointer;
}
.complete-btn {
background-color: rgb(81, 192, 81);
}
.todo-item {
padding: 0 0.5rem;
}
.fa-trash,
.fa-check {
pointer-events: none; /*to make the whole button as one*/
}
.completed {
text-decoration: line-through;
opacity: 0.5;
}In the above code, I have added several properties for opacity, text-decoration, and more. There is also CSS for the icons which will be inserted later via JavaScript.
Adding some effect Here I chose to add some animation to my To-Do List. For instance, I want that it should show some effect of disappearing when clicking in delete button aside from the list.
To add animation effect to any class there are two things:
- Add animation name to the class you want to put effects by adding
animation: slide 0.3s ease forwards;. - Defining the animation with
keyframe.
For Example:
@keyframes slide {
0% {
transform: translateY(-100%);
}
40% {
transform: translateY(15%);
}
90% {
transform: translateY(-25%);
}
} In the above code translate means that it will move in a direction, Y says the which direction it will move, here it is Y-Axis, and then the %value in () tells that how much to move. The effect can be viewed when we will link it with proper functioning JavaScript. Up till now, your project should be looking like this.
JavaScript file
Now we will work on the main functioning of our To-Do List.
We will be diving this into three parts:
- The selectors
- The event listeners.
- The functions. 3.1 Adding To-Do list 3.2 Deleting from To-Do List 3.3 Filtering List
1. The selectors
First thing is that we need to select the tags, classes, or ids (if provided) from the HTML file to target them and do work with them. This will make it easier to put event listeners and functions to them.
To get this done we will first declare a constvariable and use document.querySelector(_className_).
Code:
// selectors
const todoInput = document.querySelector(".todo-input ");
const todoButton = document.querySelector(".todo-button ");
const todoList = document.querySelector(".todo-list ");
//gets the whole added list including details and buttons
const filterOption = document.querySelector(".filter-todo");
const message = document.querySelector(".message");2. The event listeners
Now that we got the selectors, we can add event listeners to them. Event listeners are used to putting some event or actions to a section of an HTML file. Such as performing a function with a click of a mouse, is also an event. So here also we will add events.
To do this we will use the selector name and put .addEventListener(), it inside the apprentices we will first provide *event followed by the function we want to call on that event. There are many types of events, which we will use here the click event.
Code:
//event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);
In the above code, I called three functions for the working of this To-Do List. Now we will discuss them and implement them.
3. The functions
Here we will work on how we will get the data, then input it and even sort them.
3.1 Adding To-Do List
We will include a function named addTodo which will get the data from the input section from the HTML.
Once we get the data from the HTML we have to proceed with a few things in mind.
- We have to create a
divelement. This can be done easily with methods in JavaScript. When we want to create an element using JavaScript we usedocument.createElement(), inside the apprentices we provide the tag we want to include, such as"div","li"and more. - Then we have to add class name with the help of JavaScript. For this there is a method of
.classList.add(), inside the apprentices we need to provide the class name. ( The class names can be also be used to add icons) - The last thing is to append it, which means to add all of the things in a sequential manner inside the HTML file with the help of JavaScript. We use
.appendChild()the method with the part we want to include inside the apprentices.
NOTE: There is a thing which might create some problem for you, which is that when you press ENTER button, the page gets reloaded, to prevent this use parameterName.preventDefault().
Code:
function addTodo(event) {
//prevent from submitting (from refresh)
event.preventDefault();
// todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create LI
const newTodo = document.createElement("li");
newTodo.innerText = todoInput.value;
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);In the above code, we added elements and classes and then appended them.
//check mark
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class= "fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//trash mark
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class= "fas fa-trash"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);In the above code, the buttons/icons of trash and check are included.
//append to todo-list
todoList.appendChild(todoDiv);
//clear todo input value
todoInput.value = "";
}
3.2 Deleting from To-Do List
So now, we will handle the part wherein case the user wants to delete the list after he is done or wishes to change it. In the previous section when we added the trash button/icon, now it is time to put that into use!
Just like before, we will create another function with the name we put in the event listeners that is deleteCheck and we will pass a parameter along with it let it be e. So the function would look like:
function deleteCheck(e){
}NOTE: We will also wrap up the COMPLETE section in this function too. This means we will include the function to happen when someone clicks on the check button/icon.
Since we already added our event listeners, now we have to first check that the user clicked on which icon, to do this we will use e.target the method and save it in a variable. Once we get it, we will implement a conditional rendering for both the delete and check buttons.
const item = e.target;For deleting
//delete todo
if (item.classList[0] === "trash-btn") {
const todo = item.parentElement;
//to get the whole parent element
//animation
todo.classList.add("fall");
todo.addEventListener("transitionend", function () {
todo.remove();
});
}In the above code, there are a few things happening:
- We checked whether the user clicked on the trash button or not, by using
item.classList[0] === "trash-btn"inside an if statement. - We added the class
fallwhich will trigger the transition that we added in the CSS. - Finally, we removed that tag BUT only after when the transition is complete and to check that we put up another function with an event
transitionedwhich will make the function with.remove()the method in action after the transition is done.
For marking complete
if (item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle("completed");
}In the above code, we did not do much only just added the class of completed to the parent element.
3.3 Filtering the To-Do List
So, this will be the last thing we will implement, which is sorting the list into complete, incomplete, and all the lists.
Here, also we will create a function that will get triggered by the selection box we have in HTML.
Create a function filterTodo inside that create a switch statement which will have the parameter equal to the option we chose from the box.
Code:
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function (todo) {
// console.log(todo)
switch (e.target.value) {
case "all":
todo.style.display = "flex ";
break;
case "completed":
if (todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
case "uncompleted":
if (!todo.classList.contains("completed")) {
todo.style.display = "flex";
} else {
todo.style.display = "none";
}
break;
}
});In the above code, we added the class of completed to the parent element.
Here we have three cases each has its own functionality to display and hide elements from the list. In addition to that, we also added style using .style.followed by property display and then the styling value which flex in this case.
You can notice that all the functions have kind of same structure, like passing parameters, adding elements & classes, and using conditional rendering.
