Anthony Smith
Tony's Tech Blog

Tony's Tech Blog

Build a Todo List App

Build a Todo List App

With HTML, CSS, and JavaScript

Anthony Smith's photo
Anthony Smith
·Jul 13, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Create a simple 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.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.

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

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>

Great! we have our html 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");
    }
};

Great! we have our JavaScript code implemented. We should be able to now add tasks to our to-do list and it will update dynamically. Let's give it a shot!

todo.gif


Thanks for reading! If you enjoyed this article please give it a like. Thanks again and see you in the next article!

Did you find this article valuable?

Support Anthony Smith by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this