DEV Community 👩‍💻👨‍💻

Cover image for How to Create a Todo List App
Anthony Smith
Anthony Smith

Posted on

How to Create a Todo List App

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
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

Let's get started!

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.

<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">
Enter fullscreen mode Exit fullscreen mode

Once that's done, let's add our HTML code into our <body> section.

Add the todo list HTML code

<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>
Enter fullscreen mode Exit fullscreen mode

Great! we have our skeleton code implemented. Now it's time to add our 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");
    }
};
Enter fullscreen mode Exit fullscreen mode

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


🤝 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 Buy me a coffee as it will help me continue to make awesome quality blogs!

👨🏽‍💻 For more Web Dev code snippets, tips, and tricks check out my Grepper Platform

🎨 You can also check out my Portfolio here

🐦 You can also follow me on Twitter to check out my self-taught journey as well as more bite-sized tips on web development.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!