Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

JavaScript Project on Todo List

  • Difficulty Level : Medium
  • Last Updated : 29 Jan, 2021

Introduction: TODO List are the lists that we generally use to maintain our day to day tasks or list of everything that we have to do, with the most important tasks at the top of the list, and the least important tasks at the bottom. It is helpful in planning our daily schedules. We can add more tasks any time and delete a task which is completed. The four major tasks that we can perform in a TODO list are:

  1. Add tasks
  2. Update tasks
  3. Read tasks
  4. Delete tasks

Example:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

index.html




<!DOCTYPE html>
<html lang="en">
   
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href=
          integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
  
    <script src="app.js"></script>
  
    <title>To Do List</title>
</head>
   
<body>
    <header class="bg-success text-white p-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <font face="Comic sans MS" 
                        size="11" color="black">
                        <strong>ToDo List</strong>
                    </font>
                       
                </div>
            </div>
        </div>
    </header>
  
    <div class="container mt-3">
        <h2>Add Items</h2>
   
        <label id="lblsuccess" class="text-success" 
                style="display: none;">
        </label>
          
        <form id="addForm">
            <div class="row">
                <div class="col-lg-7 col-md-7 col-sm-7">
  
                    <input type="text" onkeyup=
                        "toggleButton(this, 'submit')"
                        class="form-control" id="item">
                </div>
  
                <div class="col-lg-5 col-md-5 col-sm-5">
                  <input type="submit" class="btn btn-dark"
                        id="submit" value="Submit" disabled>
                </div>
            </div>
        </form>
   
        <h3 class="mt-4">Tasks</h3>
   
        <form id="addForm">
            <ul class="list-group" id="items"></ul>
        </form>
    </div>
</body>
   
</html>


app.js




window.onload = () => {
    const form1 = document.querySelector("#addForm");
  
    let items = document.getElementById("items");
    let submit = document.getElementById("submit");
  
    let editItem = null;
  
    form1.addEventListener("submit", addItem);
    items.addEventListener("click", removeItem);
};
  
function addItem(e) {
    e.preventDefault();
  
    if (submit.value != "Submit") {
        console.log("Hello");
  
        editItem.target.parentNode.childNodes[0].data
            = document.getElementById("item").value;
  
        submit.value = "Submit";
        document.getElementById("item").value = "";
  
        document.getElementById("lblsuccess").innerHTML
            = "Text edited successfully";
  
        document.getElementById("lblsuccess")
                        .style.display = "block";
  
        setTimeout(function() {
            document.getElementById("lblsuccess")
                            .style.display = "none";
        }, 3000);
  
        return false;
    }
  
    let newItem = document.getElementById("item").value;
    if (newItem.trim() == "" || newItem.trim() == null)
        return false;
    else
        document.getElementById("item").value = "";
  
    let li = document.createElement("li");
    li.className = "list-group-item";
  
    let deleteButton = document.createElement("button");
  
    deleteButton.className = 
        "btn-danger btn btn-sm float-right delete";
  
    deleteButton.appendChild(document.createTextNode("Delete"));
  
    let editButton = document.createElement("button");
  
    editButton.className = 
            "btn-success btn btn-sm float-right edit";
  
    editButton.appendChild(document.createTextNode("Edit"));
  
    li.appendChild(document.createTextNode(newItem));
    li.appendChild(deleteButton);
    li.appendChild(editButton);
  
    items.appendChild(li);
}
  
function removeItem(e) {
    e.preventDefault();
    if (e.target.classList.contains("delete")) {
        if (confirm("Are you Sure?")) {
            let li = e.target.parentNode;
            items.removeChild(li);
            document.getElementById("lblsuccess").innerHTML
                = "Text deleted successfully";
  
            document.getElementById("lblsuccess")
                        .style.display = "block";
  
            setTimeout(function() {
                document.getElementById("lblsuccess")
                        .style.display = "none";
            }, 3000);
        }
    }
    if (e.target.classList.contains("edit")) {
        document.getElementById("item").value =
            e.target.parentNode.childNodes[0].data;
        submit.value = "EDIT";
        editItem = e;
    }
}
  
function toggleButton(ref, btnID) {
    document.getElementById(btnID).disabled = false;
}


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :