DEV Community 👩‍💻👨‍💻

Cover image for How to Make a Todo List using JavaScript
Shantanu Jana
Shantanu Jana

Posted on • Updated on

How to Make a Todo List using JavaScript

In this article you will learn how to create Todo List using JavaScript. JavaScript Todo List helps you create a list of things you want to do throughout the day. Suppose you want to do something throughout the day that you can list here. Whenever you complete that task then you can delete it.

I have taken HTML, CSS and JavaScript help to create this Todo List. html and css helped to design it and JavaScript made it work.

Watch Live Preview 👉👉 JavaScript Todo List

First I created a box on the webpage and then I created an input place to input. You will input something in that place and then you can add that text in the list with the help of add button next to it.

Each list has a delete button. Whenever you click on that button, that text will be deleted from the list.

Important Notice:

I have just created a tutorial that will store your added todo list in local storage. As a result, even if you refresh the webpage, the todo list items will not be refreshed.

✅✅ Todo List with Local Storage using JavaScript 👇👇

Step 1: Basic structure of Todo List

Using the HTML and CSS code below, I have created the basic structure for creating this todo list html css. First I designed the webpage using CSS code. Here the width of the box is 450px and min-height: 100px is used. background-color I used white.

<div class="container">

</div>
Enter fullscreen mode Exit fullscreen mode
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: #066acd;
}
.container{
    width: 40%;
    top: 50%;
    left: 50%;
    background: white;
    border-radius: 10px;
    min-width: 450px;
    position: absolute;
    min-height: 100px;
    transform: translate(-50%,-50%);
}
Enter fullscreen mode Exit fullscreen mode

Basic structure of Todo List

Step 2: Create input place and button

Now we have created a button and input space using some amount of HTML code. The width of the input space is 75% and the height is 45px. This button has a width of 20% and a height of 45px.

<div id="newtask">
    <input type="text" placeholder="Task to be done..">
    <button id="push">Add</button>
</div>
Enter fullscreen mode Exit fullscreen mode
#newtask{
    position: relative;
    padding: 30px 20px;
}
#newtask input{
    width: 75%;
    height: 45px;
    padding: 12px;
    color: #111111;
    font-weight: 500;
    position: relative;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    font-size: 15px;
    border: 2px solid #d1d3d4;
}

#newtask input:focus{
    outline: none;
    border-color: #0d75ec;
}
Enter fullscreen mode Exit fullscreen mode
#newtask button{
    position: relative;
    float: right;
    font-weight: 500;
    font-size: 16px;
    background-color: #0d75ec;
    border: none;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    width: 20%;
    height: 45px;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
}
Enter fullscreen mode Exit fullscreen mode

Create input place and button

Step 3: Create a place to view information

Now I have made a list in this project where all the tests can be seen. I did not set any specific height for this because you can add as many texts as you want here.

<div id="tasks"></div>
Enter fullscreen mode Exit fullscreen mode
#tasks{
    border-radius: 10px;
    width: 100%;
    position: relative;
    background-color: #ffffff;
    padding: 30px 20px;
    margin-top: 10px;
}

.task{
    border-radius: 5px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #939697;
    cursor: pointer;
    background-color: #c5e1e6;
    height: 50px;
    margin-bottom: 8px;
    padding: 5px 10px;
    display: flex;
}
.task span{
    font-family: 'Poppins',sans-serif;
    font-size: 15px;
    font-weight: 400;
}
Enter fullscreen mode Exit fullscreen mode
.task button{
    background-color: #0a2ea4;
    color: #ffffff;
    border: none;
    cursor: pointer;
    outline: none;
    height: 100%;
    width: 40px;
    border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Create a place to view information

Step 4: Enable Todo List JavaScript

Above we have made the basic design of Todo List. Now is the time to implement it with JavaScript. Watch its live demo to learn how it works.

First I made this condition using the 'if' condition

➤ If you do not input anything in the place of input, then you will see a kind of error message. This message will alert you to input something. For this I have taken the help of alert.

➤ Then I added the above conditions using else. We have determined what kind of work will be done if you input something in the input space.

➤ First I used innerhtml to display all the information added here in the web page. I have already created an area in the webpage. All this information can be found in that area.

➤ We've added a delete button that can be found with each text.

When that button is clicked, the text will be deleted from the list.

document.querySelector('#push').onclick = function(){
    if(document.querySelector('#newtask input').value.length == 0){
        alert("Please Enter a Task")
    }

    else{
        document.querySelector('#tasks').innerHTML += `
            <div class="task">
                <span id="taskname">
                    ${document.querySelector('#newtask input').value}
                </span>
                <button class="delete">
                    <i class="far fa-trash-alt"></i>
                </button>
            </div>
        `;

        var current_tasks = document.querySelectorAll(".delete");
        for(var i=0; i<current_tasks.length; i++){
            current_tasks[i].onclick = function(){
                this.parentNode.remove();
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Todo List using JavaScript
I hope you have learned from this tutorial how I created Todo List javascript.

Related Post:

  1. Footer HTML CSS
  2. Make a Todo List using JavaScript
  3. Simple Stopwatch using JavaScript
  4. Javascript Age Calculator
  5. Random Password Generator with JavaScript
  6. Automatic Image Slider in Html, CSS
  7. Sidebar Menu Using HTML CSS

If you want, you can download the source code required to create this project. Be sure to comment on how you like this design.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/

Top comments (26)

Collapse
 
itxshakil profile image
Shakil Alam

Awesome, I like the elegant and simple design.

I think "Add" button and "delete(trash)" button should have same background color

I have created the same TodoApp with PWA functionality.

Give it a try and tell your thoughts on it.

todo.shakiltech.com

Collapse
 
abbie34 profile image
abbie34

Hey.. This is way more helpful than what I've been seeing online so far. Thank you!

Collapse
 
githubtuankiet profile image
Tuan Kiet Tran • Edited on

You must fix this problem, it gets overflow when I add more than 10 tasks. Totally, thank you for this and have a nice work.
Overflow

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Welcome 😊

Collapse
 
ranvirchoudhary profile image
RanvirChoudhary

Can i sell this as an app? i think i need permission from you lol

Collapse
 
shantanu_jana profile image
Info Comment hidden by post author - thread only accessible via permalink
Shantanu Jana Author

OK,
Now this design is yours

Collapse
 
ranvirchoudhary profile image
RanvirChoudhary

is the heart a yes or a no? lol

Collapse
 
bogdanbatsenko profile image
bogdanbatsenko

I tested the code. It won't work for me unless I wrap all the code in
document.addEventListener('DOMContentLoaded', (event) =>{});

Otherwise it drops error "Cannot set properties of null (setting 'onclick')"

Collapse
 
shantanu_jana profile image
Shantanu Jana Author
Collapse
 
silvodesigns profile image
Kevin Silvestre

I used this for my daily dose of JS practice. Thank you;

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Welcome

Collapse
 
simplyauf profile image
Simplyauf

When the page is refreshed,the list disappears.

Any way to solve this?

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Collapse
 
onuproy profile image
Onup Chandra Barmon

Great video!

Collapse
 
toheebosundare profile image
toheebosundare

You have to add event listener -DOMContentLoaded and save to local storage. Watch tutorials on YouTube on how to do that

Collapse
 
onuproy profile image
Onup Chandra Barmon

Awesome great job ❣️❣️

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Thank you 😊

Collapse
 
bogdanbatsenko profile image
bogdanbatsenko

Wow. Nice and clean. Thank you

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Welcome

Collapse
 
mathiashidalgo profile image
Mathias Hidalgo Caja

Hello, i have a question. Why when i put a task, the page refresh, and dont let me put the task?

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

You can watch this video
youtube.com/watch?v=6yN7c4jfv_E

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Collapse
 
toheebosundare profile image
toheebosundare

You have to add event listener -DOMContentLoaded and save to local storage. Watch tutorials on YouTube on how to do that

Collapse
 
cyril174 profile image
Cyril Kariyawasam

Thanks. Very simple way. Helpful

Collapse
 
shantanu_jana profile image
Shantanu Jana Author

Welcome 😊

Some comments have been hidden by the post's author - find out more

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠