Open In App
Related Articles

JavaScript Project on Todo List

Improve Article
Save Article
Like Article

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. It is helpful in planning our daily schedules. We can add more tasks at any time and delete a task that 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


  • index.html: In this file, we will create the basic structure of the project.
  • app.js: In this file, we will add the logical section of our project where we will define functions that will perform the tasks described in the list above.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
    <script src="app.js"></script>
    <title>To Do List</title>
    <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>
    <div class="container mt-3">
        <h2>Add Items</h2>
        <label id="lblsuccess" class="text-success"
                style="display: none;">
        <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 class="col-lg-5 col-md-5 col-sm-5">
                <input type="submit" class="btn btn-dark"
                        id="submit" value="Submit" disabled>
        <h3 class="mt-4">Tasks</h3>
        <form id="addForm">
            <ul class="list-group" id="items"></ul>


// 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) {
    if (submit.value != "Submit") {
            = document.getElementById("item").value;
        submit.value = "Submit";
        document.getElementById("item").value = "";
            = "Text edited successfully";
                        .style.display = "block";
        setTimeout(function() {
                            .style.display = "none";
        }, 3000);
        return false;
    let newItem = document.getElementById("item").value;
    if (newItem.trim() == "" || newItem.trim() == null)
        return false;
        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";
    let editButton = document.createElement("button");
    editButton.className =
            "btn-success btn btn-sm float-right edit";
function removeItem(e) {
    if ("delete")) {
        if (confirm("Are you Sure?")) {
            let li =;
                = "Text deleted successfully";
                        .style.display = "block";
            setTimeout(function() {
                        .style.display = "none";
            }, 3000);
    if ("edit")) {
        document.getElementById("item").value =
        submit.value = "EDIT";
        editItem = e;
function toggleButton(ref, btnID) {
    document.getElementById(btnID).disabled = false;

Output: Click here to see live code output

JavaScript Project on Todo List

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 28 Feb, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials