Todo List In JavaScript With Source Code

In JavaScript, Todo List is a web-based program developed using JavaScript, bootstrap, and HTML.

This simple todo list in JavaScript is an interesting project which allow user to input important data on web.

The user can add the number of to-do work details and you can see the details stored in the list form like sticky list notes. Also, the user can delete the list items if he/she wants to remove it.

What is Todo List in JavaScript (JS)

The Todo List in JavaScript is a web program that allows users to create a list of things that need to do throughout the entire day.

For example, if you want to do something that was really important and you want to list all of them, you can list it on the to do web program for better and you can’t forget it.

This Todo List has the following features which user allows to make a list of their daily works that they have to do and keep them as records. You just have to type the work information in the text fields and press the enter to add the information on the record. 

Importance of Todo List

The importance of Todo List App in JS is that it make sure of your tasks are been written all in one place so that you cannot forget the important event of your life.

In addition, you can easily plan the important thing you will do in the todo item list, in order for you to prioritize and take an immediate actions to the things you will do first.

Benefits of Todo List

• Productivity increases – One of the main benefits of todo list is that it may help you to work and prioritize your personal tasks. This allows you to have a well-organized daily routine. Todo list can be used and improved your (time management) because all of your tasks are been laid out completely and organized.
• Provides daily motivation – Having many things to do or tasks can be quite overwhelming, But with the help of proper (motivation) all the things can be accomplish and can reduce more stress once using a todo list. Using this web page Todo List app it makes easier to organized all the things which you want to accomplish or to be done in that day.
• Memory improved – A Todo List can help you improve memory overall by thinking less and reinforcing your short term (memory). Short-term goals and tasks you need to accomplish can easily be check using the todo list check lists. In short, making a list everyday can improved your entire memory and can assist you by making sure that all the important tasks will get completed.
• Reduce stress – Todo List can plan and manage your entire activities which you want to complete every day and help you (declutter) your life and remove all the bad sense of being too much overwhelmed about the needs to be done. The more you are realistic about the things that need to be accomplish the more they can reduced stress.
• Spent more personal time – One also of the benefits of having a todo list it makes your personal time more enjoyable it helps you organize all the time and tasks on time and make it efficiently working. If you’re being honest to yourself and focus mainly on your fix schedule, you can do and have more time to relaxation and enjoy your hobbies.

How do I edit a To Do list in JavaScript?

It is very simple to edit on Todo List in JavaScript by simply hit the button class edit button on the web program, that edit button has an attribute method called onclick(). By clicking the button the edit method will be executed and pass all the index as the (parameter) to the add button and delete button.

The todo list data will be stored on the local storage and used a crud operations to a JavaScript file and HTML code.

It is very simple to edit on Todo List in JavaScript by simply hit the button class edit button on the web program, that edit button has an attribute method called onclick(). By clicking the button the edit method will be executed and pass all the index as the (parameter) to the add button and delete button.

The todo list data will be stored on the local storage and used a crud operations to a JavaScript file and HTML code.

Project details and technology:

Steps on how to create a Todo List In JavaScript

The Code Given Below Is For The 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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="style.css">

    <title>My Todo List</title>

</head>



<body>

    <div class="container">

        <header class="text-center text-light my-4">

            <h1 class="mb-4">Todo List</h1>

            <form action="" class="search">

                <i class="fa fa-search icon"></i>

                <input type="text" class="form-control input-field m-auto" placeholder="search todos">

            </form>

        </header>

	<!-- items center justify content -->

        <ul class="list-group todos mx-auto text-light">

            <li class="list-group-item d-flex justify-content-between align-items-center">

                <span>Create a Javascript Project</span>

                <i class="fa fa-trash-o delete"></i>

            </li>

		<!-- display flex -->

            <li class="list-group-item d-flex justify-content-between align-items-center">

                <span>Learn Programming</span>

                <i class="fa fa-trash-o delete"></i>



            </li>

        </ul>



        <form  class="add text-center my-4">

		<!-- align items center justify, fa trash alt -->

            <label class="text-light">

                Add new todo...

            </label>

            <input type="text" class="form-control m-auto" name="add"/>

        </form>

    </div>

    <script src="app.js"></script>

</body>



</html>

In this file which is the index of the project.

The Code Given Below Is For The style.css

body {
  background: #353f5b;
}
.container {
  max-width: 400px;
}
.search i {
  position: absolute;
}
.search {
  position: relative;
}
.icon {
  padding: 10px;
  left: 0;
}
.input-field {
  text-align: center;
}

input[type="text"],
input[type="text"]:focus {
  color: #fff;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  max-width: 400px;
}
.todos li {
  background: #423a6f;
}
.delete {
  cursor: pointer;
}


.filtered{
  display: none !important;
}

In this file which is the design of the project.

The Code Given Below Is For The app.js

const addForm = document.querySelector(".add");//reference to form
const list = document.querySelector(".todos"); //reference to ul





//Adding todos
const generateTemplate = (todo) => {
  const html = `
   <li class="list-group-item d-flex justify-content-between align-items-center">
                <span>${todo}</span>
                <i class="fa fa-trash-o delete"></i>
    </li>
    `;
  list.innerHTML += html;
};

addForm.addEventListener("submit", (e) => {
  e.preventDefault();
  const todo = addForm.add.value.trim();
  // console.log(todo);

  //check - for true if the todo lenght is greater than 1 it return true to if condition
  if (todo.length) {
    generateTemplate(todo);
    addForm.reset(); //to reset the input
  }
});





// Deleting todos - we are using event delegation
//we already had reference for ul
list.addEventListener("click", (e) => {
  //  if (e.target.tagName === "I")
  if (e.target.classList.contains("delete")) {
    e.target.parentElement.remove();
  }
});




//Filter and Searching - keyup event
//cont search = document.querySelector('.search input');
const search = document.querySelector(".input-field"); //reference to search input

const filterTodos = (term) => {
    Array.from(list.children)
      .filter((todo) => !todo.textContent.toLowerCase().includes(term))
      .forEach((todo) => todo.classList.add("filtered"));
    
    
    
    Array.from(list.children)
      .filter((todo) => todo.textContent.toLowerCase().includes(term))
      .forEach((todo) => todo.classList.remove("filtered"));
    
};

search.addEventListener("keyup", () => {
  const term = search.value.trim().toLowerCase();
    filterTodos(term);
});

In this file which is the JavaScript function of the project.

Downloadable Source Code

Summary

This JavaScript Project is simply in HTML, CSS, and JavaScript. Taking about the features of this system, the user can make the list of their daily works that they have to do and keep them as records.

You just have to type the work information in the text fields and press the enter to add the information on the record.

This project includes a lot of JavaScript for making the functioning of the project.

Related Articles

• To Do List Project in Python with Source Code

Inquiries

If you have any questions or suggestions about Todo List In JavaScript , please feel free to leave a comment below.