This is a beginners guide to learn how to build a Todo-list application with JavaScript.
Introduction
A Todo list app is an application that allows users to be able to add items to a list and keep track of the items they added to the list. The list items could be Daly goals or monthly activities the user intends to achieve.
In this article, you'll learn how to build a Todo list application to keep track of your goals. It is a good project to add to your portfolio.
Prerequisite
Before you continue reading this article, you should have basic knowledge of HTML, CSS, and JavaScript and you should be familiar with JavaScript DOM manipulation.
Table of contents
- Introduction
- Prerequisites
- The components of the Todo-list app
- Understand how the Todo list app works
- Use HTML to create the Layout of the Todo-list app
- Style the Todo list app with CSS
- Working with the JavaScript file
- Get elements from HTML
- Initialize the addList function
- Conclusion
The components of the Todo-list app
The Todo list app contains:
An input field where a user can type in the Todo item.
An add button, that when clicked, the Todo item is added to the Todo list.
A div element that allows the add todo items to be displayed.
The Todo items are displayed together with two buttons, the "DONE" button and the "DELETE" button. The "DONE" button is to mark a completed Todo item while the "DELETE" button is to delete any item from the list.
Understand how the Todo list app works
When a user types a Todo item in the input field, and clicks the add button, the Todo item is added to the Todo list. Then below the displayed item are two buttons, 'DONE' button and 'DELETE' button. When 'DONE' button is clicked, the displayed Todo item is crossed and when the 'DELETE' button is clicked, the displayed Todo item is deleted from the list.
Now that you're familiar with the functionality of the application, let's write the codes to make the application a reality.
In your code editor, create HTML, CSS and JavaScript files and link them appropriately.
In the HTML head tag, add the link tag to link the CSS file
<link rel="stylesheet" href="style.css" />
In the body of the HTML add the script tag, to link the JavaScript file
<script src="index.js"></script>
Create the Layout of the Todo list with HTML
Enclose the description of the web app which is "Todo list" in an h1 tag, to give it a big font size.
Add a div tag with the id "task-container" to the. HTML file.
Create an input field that has an id of "todo-input" and create a button element has an id of "add-input"
<h1 id="todo-list">TODO LIST</h1>
<div id="task-container">
<input type="text" name="todo-input" id="todo-input">
<button id="add-input">add</button>
</div>
Style the Todo list app with CSS
Place the todo-list id at the center of the web page
Give the "task-container" id a coral background color,
Set the minimum height of the "task-container" to 50vh,
Give the "task-container" id a padding of 10px, a border radius of 10px, align all the text in the "task-container" id to the center, set the margin of the "task-container" id to auto.
#todo-list{
text-align: center;
}
#task-container{
background-color: coral;
min-height: 50vh;
padding: 10px;
border-radius: 10px;
text-align: center;
margin: auto;
}
Working with the JavaScript file
In this section, you'll learn how to implement the functionalities if there Todo list app using JavaScript.
Get elements from HTML
If you're familiar with JavaScript DOM manipulation, you'll understand that before you use any element from HTML, you must use a "document.getElement" method to fetch the element from HTML, and then assign the element to a variable name.
Use let keyword to assign a variable name, addInput and use document.getElementById to fetch the button element with it's "add-input" id.
Use let keyword to assign a variable name, todoInput and use document.getElementById to fetch the input field with it's "todo-input" id.
Use let keyword to assign a variable name, taskContainert and use document.getElementById to fetch the "task-container" id.
let addInput = document.getElementById("add-input");
let todoInput = document.getElementById("todo-input");
let taskContainer = document.getElementById("task-container");
Give the addInput variable a "click" event listener, so that on-click, the addList function will be executed.
addInput.addEventListener("click", addList)
Initialize the addList function
Use function declaration to initialize the addList function
function addList() {}
Note: The following lines of code are to be written inside the addList() function
In the addList function, use the createElement method to create a div element that was not initially written in the HTML file. The div element will be the container that displays the Todo list items.
let newList = document.createElement("div");
Append the newList variable to the parent element, which is the taskContainer variable using the appendChild() method.
taskContainer.appendChild(newList);
The taskContainer is the parent element while the newList is the child element.
Appending a child element to the parent element will make it to be displayed under the parent element.
Note: taskContainer is a variable name given to the div tag with task-container id in the HTML file while newList was created with JavaScript using the createElement() method.
Then use the code below to create a paragraph element, and give it a variable name, outputText.
Make the innerText of the paragraph equal to the value of the text in the input field.
let outputText = document.createElement("p");
outputText.innerText = todoInput.value;
Use the appendChild() method to append the outputText to the newList variable.
Set the value of the input field to empty.
newList.appendChild(outputText);
todoInput.value = "";
To make the texts in the outputText variable visible, use the JavaScript appendChild() method. The appendChild() method works by displaying the child element of a parent element. In this case, outputText variable is the child element of newList variable parent element.
The todoInput.value sets the input field to empty after the appendChild() is executed.
Next, is to output the "DELETE" button and the "DONE" button.
Give the delete button a variable name of deleteButton. Use the createElement() method to create a button element.
Give the button an innerText called "DELETE".
Use the appendChild() method to display the deleteButton variable under the newList variable parent element.
Add the click event listener to the deleteButton variable, and assign the deleteFunc function to execute the delete function on click.
let deleteButton = document.createElement("button");
deleteButton.innerText = "DELETE";
newList.appendChild(deleteButton);
deleteButton.addEventListener("click", deleteFunc);
The next item to create is the button that a user can click when any task is done. Use the createElement() method to create a button element. Assign it a variable name called, completedButton. Give the button an innerText called "DONE". Use the appendChild() method to display the completedButton variable under the newList variable parent element. Add the click event listener to the completedButton variable, and assign the completedFunc function to execute the completed function on click.
let completedButton = document.createElement("button");
completedButton.innerText = "DONE";
newList.appendChild(completedButton);
completedButton.addEventListener("click", completedFunc);
Initialize the deleteFunc function, and set the innerHTML of the newList variable to empty. This will delete the Todo item from being displayed.
function deleteFunc() {
newList.innerHTML = "";
};
Initialize the completedFunc function, and give the parent element of the completedButton a text declaration of line-through.
function completedFunc() {
completedButton.parentElement.style.textDecoration = "line-through";
};
After writing the entire addList() function, you should have these lines of code
function addList() {
let newList = document.createElement("div");
taskContainer.appendChild(newList);
let outputText = document.createElement("p");
outputText.innerText = todoInput.value;
newList.appendChild(outputText);
todoInput.value = "";
let deleteButton = document.createElement("button");
deleteButton.innerText = "DELETE";
newList.appendChild(deleteButton);
deleteButton.addEventListener("click", deleteFunc);
let completedButton = document.createElement("button");
completedButton.innerText = "DONE";
newList.appendChild(completedButton);
completedButton.addEventListener("click", completedFunc);
function deleteFunc() {
newList.innerHTML = "";
};
function completedFunc() {
completedButton.parentElement.style.textDecoration = "line-through";
};
}
Conclusion
In conclusion, you have built a functional Todo list application that you can use to create your Todo items and showcase as a project in your portfolio. If there are other functionalities you'll like to add to the Todo list application, you can as well add them.
Thank you for reading to the end, do well to like and leave a comment.
Top comments (3)
Hi ebube, Great content! However, there are a few things to take note of or improve in this article.
document.getElementByIdto fetch the button element with its "add-input" id; thedocument.getElementhere should be formatted as well so that readers won't be confused or mix things up.Overall, great effort! I will be looking forward to your next post. cheers
thanks a lot for the feedback, i really appreciate.. I'd publish much more edited articles
Keep showing up, you will get there😀