In this article, you will learn how to create JavaScript Todo List. You can easily create this Todo List using HTML CSS and JavaScript.
If you are a beginner then this simple todo list project will help you a lot. Here I have shared step by step tutorial and all the necessary information.
Earlier I shared many more tutorials and designs of Todo List with you. But they are very advanced. I have shared some designs where your inputted data will be stored in local storage and you can see that data even after refreshing the page. But this is a very basic design.
Todo List JavaScript
In this design (How To Create a To Do List) I used a little bit of HTML CSS and a basic amount of JavaScript. Created the basic structure of the To-Do List project using HTML and designed it using CSS. In the end, I made this project (JavaScript Project on Todo List) functional with JavaScript.
Below I have given a preview that will help you to know how this javascript todo list works.
See the Pen Untitled by Code Media (@codemediaweb) on CodePen.
Hope you got to know how this project(Todo List Using JavaScript) works from the above demo. As you can see above a small box is created on a web page. Within that box is a place to input. Where you can input your tasks.
Then there is a button, if you click on that button, those tasks can be seen in the display. However, you can delete these tasks. Each tax has a delete icon next to it. Click on which task will be deleted.
How to Make a JavaScript Todo List
If you want to build it then follow the step-by-step tutorial below. Here I have given the information on each step which will help you to understand and know how I made it very easily.
Below the article, you will find all the source code download buttons. But I request you follow the tutorials below.
1. Basic Structure of JavaScript Todo List
First, I created a basic structure of this JavaScript To-Do List using the following HTML and CSS codes. All information can be found in this basic structure.
First, some basic design of the web page is done and the background color is added to the web page.
I have used width: 40% and min-width: 450px for this box. I also used transform: translate(-50%,-50%) and top: 50%, left: 50% to place it in the middle of the web page. And the white color is used in the background of that box so that the box can be seen very nicely on the blue background.
2. Create space for task input
Now an input box and a button are created to input the task. I have designed the input box and button using CSS. I have used width: 75% and height: 45px of the input box.
I also use input:focus to specify what happens when you click on that input box.
3. Design the Todo List button
The button is designed using the following CSS. Clicking on this button will list your inputted task in the display.
I used blue color for the background of the button and used width: 20% and height: 45px relative to the box.
4. Create a place to view tasks
Now it’s time to create a display in which the To-Do List JavaScript tasks can be seen. Now the list box is created and designed using the following codes.
5. Design the tasks of the Todo List
List information and list button should be designed using the following css. Now you may be wondering why this information is not included in the HTML. So why are we using CSS for this. Actually we will add these buttons by javascript.
6. Activate the JavaScript Todo List
Using the above codes we have created and designed this JavaScript To Do List basic structure.
Now the main function needs to be executed by javascript. Even if you know basic JavaScript, hopefully, you won’t have too much trouble understanding. Because with each line I used proper information.
Below I put all the javascript together. But if you don’t understand then follow the below explanations.
JavaScript Explanation:
1. Using document.querySelector(‘#push’).onclick I’ve specified what happens when you click on the add button.
2. Then using “if” we specify that an alert message should be displayed when there is no value in the input box. I have used alert() function to display this alert message.
3. Then using “else” I specify what happens when the above condition doesn’t work i.e. something is ever inputted into the input box.
4. Here I have instructed the ‘#tasks’ section or display the information that you will input into the input box.
5. innerHTML is used to display information that helps preview any HTML element within a webpage.
6. var current_tasks = document.querySelectorAll(“.delete”) With this line I created a new constant to create the delete button within the task. With the help of this button, you can delete tasks.
7. current_tasks[i].onclick = function With this line I have specified what happens when you click on the delete button. Here I have used this.parentNode.remove which will help to delete the task.
Hope you didn’t have any trouble understanding the above javascript code. Now if you want to create an advanced todo list then you can see another advanced to-do list tutorial made by me.
If you want to download the source code then use the download button below. Be sure to comment on how you like this JavaScript Todo List project.