Article Objective
At the end of this technical article, first, the reader will learn how to create three categories of to-do lists with delete (‘X’) button. Secondly, the reader will learn how to get the inputs to show in each to-do list. Then finally, the reader will learn how to use the delete (‘X’) button to delete individual to-do list.
Article outline
- Introduction
- Step 1: Creating a simple heading and adding background image (HTML & CSS)
- Step 2: Creating a section that will contain the to-do lists (HTML)
- Step 3: Styling the section and each of the to-do lists (CSS)
- Step 4: Declaring all the variables (JavaScript)
- Step 5: Getting user inputs to display in each to-do list category (JavaScript)
- Step 6: Activating the delete button and adding a prompt to it (JavaScript)
- Conclusion
Introduction
A to-do list is simply a written list of tasks or errands that one needs or intends to carry out over a given time or in a certain place. Generally speaking, we humans are prone to forgetfulness, especially when we have a lot of things to do day in, day out – which is where a to-do list can really help us. To-do list is a productivity tool that can help us to list out tasks we intend to accomplish and then crosscheck to see if we’ve accomplished them. It also serves as a memory aid to help us remember what we need to do at a given time or even place.
In this article, we are going to create tri-category to-do lists with JavaScript, whose user interface will be designed using plain HTML and CSS. These tri-category to-do lists are going to contain to-do list for home, to-do list for workplace, and to-do list for grocery store. Each of these to-do lists are going to work independently of each other, that is, what the user enters into any of the category won’t show in the other categories. With this, a user can enter a specific to-do in each of the to-do list categories.
Let us get started creating these tri-category to-do lists.
Step 1: Creating a simple heading and adding background image (HTML & CSS)
The first thing we have to do is to open up our code editor (VS Code used here) and create three separate files and then link the CSS and JS files in the HTML.
Then we can proceed to create a simple heading indicating what we are doing.
Let's add some CSS styling:
After applying these styles, it should now look like this:
Let’s proceed to use a background image in the body of our to-do lists project.
To do this, you can download an image of your choice (from Pexels, Freepik, Pixabay etc.) to the folder containing the files of this project to serve as the background image.
Step 2: Creating a section that will contain the to-do lists (HTML)
Here, we are going to create a section that is going to contain the three categories of to-do lists, which are to-do list for home, to-do list for workplace, and to-do list for grocery store.
We are going to create three containers inside this section and these containers are going to have the following class names: home, workplace, and grocerystore.
Inside each of these containers, we are going to have a heading (to indicate the different to-do list), input (for text), button (add), and an empty unordered list in which each entered to-do list will be stored. In order to style them, we are going to give all of the aforementioned a class name.
As you can see, the unordered list in each of the to-do list containers has a list that contain a to-do entry and a button (to delete an entry) but which have all been commented out. There are two reasons for doing this. The first reason is because we want the to-do list entry to come from a user. Secondly, it is only to show the selectors (class names) given to the list and the button, which we are going to make use of in CSS and JavaScript.
Step 3: Styling the section and each of the to-do lists (CSS)
The section is the first thing we start with and the major styling include: width: 90%; margin: auto; display: grid; and grid-template-columns; which makes the to-do lists responsive. Then we style the elements inside the first to-do list container and then style the heading - making the font bigger and giving it a standout color. Thereafter, we style the input field and the add button to make them eye-pleasing. Finally, we style the empty unordered list and also style the appearance of the list so that each to-do list entry will have that same appearance.
For the other two categories of to-do lists to have the same appearance as the first, we are going to apply the same styling to them. Though we are making use of the same styling, but for the sake of easy differentiation, we need to add a figure to the selectors (i.e., class names) used. The list class inside the empty unordered list is the only class name that we are not going to repeat and which is going to be used for the three categories of to-do lists.
Styling for the second to-do list category:
Styling for the third to-do list category:
After applying all of these styling, we are going to have tri-category to-do lists that look like this:
Step 4: Declaring all the variables (JavaScript)
We are done with designing the interface of our tri-category to-do lists, but they won’t work without JavaScript. So, the first thing we have to do is to declare all the variables (that points to the selectors) in JavaScript.
With this, we can have access to the input field, the add button, and the empty unordered list all inside their respective HTML containers.
Step 5: Getting user inputs to display in each to-do list category (JavaScript)
Now that we have declared all the variables, we need to get the input (i.e., to-do entry) of the user to display in each to-do list category. Here is what we need to do in JavaScript:
Since we want each to-do list category to work independently, we have to copy these same lines of code for the other two to-do list categories but we have to differentiate their variables i.e., btn2, deletebtn2, btn3, deletebtn3 etc.
After these JavaScript codes have been implemented, our tri-category to-do lists gets working and whatever to-do a user enters for one category will only show up there (unless the user types the same to-do in another category).
So, this is how it is going to look like:
As you can see from here, each to-do list work independently and doesn’t interfere with each other. The next thing we want to do is to activate the delete button and add a prompt to it.
Step 6: Activating the delete button and adding a prompt to it (JavaScript)
Now that our tri-category to-do lists are working, we want to activate the delete button so that a user will be able to delete any to-do entry that has been accomplished. We want to also add a prompt to ask the user if they are sure of deleting a to-do entry.
Here is what we need to do in JavaScript:
So, what we are going to do is to make this the last lines of code under the JavaScript codes for each to-do list category as laid out in Step 5. After this is done, it will now be possible to delete any to-do entry in each of the to-do list category.
We then need to enter to-dos again because the added JavaScript codes for the prompt automatically refresh the page.
The delete button on the first to-do entry was clicked on and it displayed the prompt shown in the snapshot. After clicking OK, the first to-do entry in the to-do list for home is deleted and we have the result below.
Below is all the code implementation for this project in my Codepen.
Please note: I've changed the body "background-image" to "background-color" in Codepen because I had issues adding background image in Codepen, other than this, nothing else changes.
Conclusion
In this article, we focused on creating tri-category to-do lists that can be useful for managing to-dos for the home, work place, and the grocery store. The interface of the to-do lists was designed with plain HTML and CSS and functionality was added to them using JavaScript. This project was developed for beginners who are still trying to get a hang of JavaScript.
Top comments (0)