How to Create a Todo List App
Tags: html, css, javascript, webdev
Published: 2022-08-16 00:59:00

Today we are going to build a simple to-do list using HTML, CSS and JavaScript. This will be a fun little project that will surely give you some good practice on your Front-end development skills. 

![todoapp](https://i.ibb.co/k46Mcyb/todoApp.png)
This todo app will allow users to add, remove, and modify tasks easily and effectively. You can easily integrate this lightweight code inside your project to create to-do lists on the fly according to your needs.

![jimhalpert](https://media.giphy.com/media/MNmyTin5qt5LSXirxd/giphy.gif)

<b>Let's get started!</b>

## Add Bootstrap 5 to your project

The first thing we need to do is set up our project and add our HTML code. We will use a `<div>` tag to create a container for our to-do list and then we'll add our JavaScript later on.

Let's first add our Bootstrap 5 CSS into the `<head>` section of our HTML file.

```html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
```
Once that's done, let's add our HTML code into our `<body>` section.

## Add the todo list HTML code

```html
<div class=" container rounded-3 border-dark border border-2 my-5 bg-white" style="height:auto;">
    <div>
        <h1 class=" h1">To Do List</h1>
        <div class="row">
            <div class=" col-8">
                <input class=" py-3 form-control shadow" placeholder="Add a task" type="text" id="inputText">
            </div>
            <div class="col-2">
                <button id="addButton" onclick="addList()" class=" mt-2 btn btn-success"> Add Task</button>
            </div>
        </div>
    </div>
    <hr>
    <div class="row rounded bg-white">
        <div class=" col-12">
            <ul class=" list-group" id="list"></ul>
        </div>
    </div>
</div>
```
Great! we have our skeleton code implemented. Now it's time to add our JavaScript.

```javascript
let input = document.getElementById("inputText");
        let list= document.getElementById("list");
        let minimalValue = 3;
        let listNum = 0;
addList=()=>{
    // get
    let inputText = filterList(input.value);
    // set 
   if (inputText) {
    list.innerHTML += ` <li class=" my-3 py-3 shadow list-group-item " id="list${listNum}">
                <div class="row">
                <div class="col-1">
                <input class="" type="checkbox" id="check${listNum}" onclick="done(${listNum})">
                </div>
                <div class="col-6">
                    <span class=" h4" id="text${listNum}"> ${inputText} </span>
                </div>
                <div class="col-4">
                     <button class=" btn btn-danger" onclick="deleteList(${listNum})">Delete</button>
                     <button class=" btn btn-primary" onclick="editList(${listNum})">Edit</button>
                </div>                  
                 </div>    
                </li> `;
        input.value=" ";
        listNum++;

   }
}

done=(listId)=>{ 
    let checkbox = document.getElementById(`check${listId}`);
    let current = document.getElementById(`text${listId}`);
    let classExit=current.classList.contains("text-decoration-line-through");
    if (classExit == true) {
        current.classList.remove("text-decoration-line-through");
    }else{
        current.classList.add("text-decoration-line-through");
    }
    
}
// filter the list
filterList=(x)=>{
       if (x) {
            if (x.length >= minimalValue) {
                return x;
            }
            else{
                alert("Please enter more than 3 words")
            }
       }
       else{
            return false;
       }
}
// edit list
editList=(listId)=>{
    let currentText = document.getElementById(`text${listId}`);
    let newText = prompt("Type a new task",currentText.innerHTML);
    if (filterList(newText)) {
        currentText.innerHTML = newText; 
    }
}
// delete list
deleteList=(listId)=>{
    let current = document.getElementById(`text${listId}`).innerHTML;
       let deleteComfirm = confirm(`Are you sure you want to delete the task:${current}?`);
    if (deleteComfirm) {
         let p = document.getElementById("list")
        let c = document.getElementById(`list${listId}`);
        p.removeChild(c);
    }
    else{
        console.log("deleted");
    }
};
```
## Conclusion
Great! we have our JavaScript code implemented. We should now be able to add tasks to our to-do list and it will update dynamically.

![todoApp](https://i.ibb.co/4fhR95N/todo.gif)


<hr>

🤝 Thank you so much for taking time out of your day to read this Article! I hope it helped you out and you learned something new today! Please leave a comment if you have anything you'd like to add.

☕️ If you enjoy reading my content <a href="https://www.buymeacoffee.com/tonysmith2077">Buy me a coffee</a> as it will help me continue to make awesome quality blogs!

👨🏽‍💻 For more Web Dev code snippets, tips, and tricks check out my <a href="https://www.codegrepper.com/profile/anthony-smith">Grepper Platform</a>

🎨 You can also check out my Portfolio  <a href="https://anthonysdigital.net/">here</a>

🐦 You can also follow me on <a href="https://twitter.com/tonycodesdaily">Twitter</a> to check out my self-taught journey as well as more bite-sized tips on web development.