Open In App

JavaScript Project on Todo List

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Todo Lists 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. In this article, we are going to learn how to JavaScript Project on Todo List.

Preview Image:

Screenshot-2023-12-20-220039

Prerequisites

Approach

  • Use HTML to give structure to your project.
  • Use CSS for Styling purposes
  • JavaScript will be used to provide the required functionality
    • Sets up event listeners for form submission and item clicks.
    • Handles adding and editing items in the list.
    • Displays success messages for add and edit operations.
    • Handles item deletion with a confirmation dialog.
    • Enables button based on provided reference and button ID.
    • Interactive list for adding, editing, and deleting items.

Example: This example shows an implementation of the above-explained approach.

Javascript




// 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;
}


HTML




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


Output: Click here to see live code output

JavaScript Project on Todo List



Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads