Develop a To-Do List APP in Vanilla Javascript
Today we will be building a very simple To-Do List app using pure javascript, you can check it out live here. A good practice exercise for people who have learned DOM manipulation, worry not if you do not know DOM manipulation. I have written this tutorial to teach the basics of DOM manipulation.
The app will be able to add a new task, tick a task, remove a task and, clear the task board. We will need to create three files: index.html, style.css, and app.js.
Let us then get into coding.
1. The HTML file
That is it for the HTML file, you should be familiar with the HTML syntax and easily understand this code. what we have there is a form which will be used for inserting tasks, the taskboard div and a clear link for clearing the taskboard.
2. The CSS file
That is it for the CSS file, you can even come up with your own styling and write down the link of your to-do list app in the responses section so that I can see all your different styling.
There is a point that needs to be made about the CSS file, if you notice in the taskboard class I commented out the line /*display: none;*/ Later it will be uncommented and it will be handled by the Javascript.
For now, you should have something like this:
3. The JS file
Now we are going to start with the cool part, the app functionalities will be implemented in the Javascript file.
Before we start, uncomment the display: none; in the taskboard class in the CSS file. And also comment out the li elements within the ul tag in the HTML file, all that code will be added via Javascript.
3.1. Adding a single task
The code above is responsible for adding a new task into the taskboard.
Firstly, we call the function loadEvent this function is responsible for grouping all the events that the app is going to listen. Within the loadEvent function, we have the first event listener, that listens to the submission event on the form and calls the function submit which is responsible for first to prevent the default behavior of a form submission, we do not want to have the page updated. And then it checks if the string entered is empty or not, if it is not empty it calls the functionaddTask with the string submitted as a parameter.
The addTask function is responsible for adding the tasks into the taskboard. It first locates the ul element in the page, secondly creates a new li element, then it assigns and formats how the task should appear on the taskboard. Lastly, it appends the new li element within the ul tag.
3.2. Clearing the taskboard
In the same file app.js, let us add an event listener for the clear link. document.getElementById('clear').addEventListener('click',clearList);
So we are listening to an event of a click on the clear link which has the id of clear. After this event the clearList function is called and set the ul innerHTML to an empty string, removing every previous HTML that was within the tag ul, removing every element in the list.
3.3. Ticking and Deleting single elements
The code above allows us to tick or delete a task. If you see within the ? loadEventsfunction a third event listener was added, that is responsible to listen to the click event within the ul element. You may ask now how will the code know when the user clicks on the delete button or on the tick button? Well, the deleteOrTick function helps us with that. it basically checks the class name of the element that was clicked, if it has the class name of delete it calls the deleteTask function, else it calls the tickTask function.
3.3.1. The deleteTask function
The deleteTask function first gets the parent element of the target, which is the li element, then it gets the parent node of the li element which is the ul element. lastly, it calls the removeChild on the parent element and takes as a parameter the li element selected, which is then removed from the DOM.
3.3.2.The tickTask function
This function starts with const task = e.target.nextSibling; this line of code gets the text that is within the li element, e.target is the tick button, so e.target.nextSibling is the actual task.
Then it checks if it was checked if it was it changes the text-decoration to line-through and change the text color to #ff0000 . If it was unchecked it changes the text-decoration to none and changes back the text color to #2f44f .
4. Conclusion
Well, that is it for the tutorial, now our app is fully functional. You can download the code from here or see it live here.
Good day, good coding.
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
