Todo List in JavaScript with Search Box

Todo List in JavaScript with Search Box
Code Snippet:Todo List - JavaScript
Author: Naieemur Rahman
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 6,162
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code snippet helps you to create todo list with a search box. It allows you to add/remove tasks and search for a specific task from the list. Basically, the plugin uses Bootstrap 4 and Font Awesome for interface design. You can easily integrate this to-do list app into your web project to allow users to add tasks.

How to Create Todo List in JavaScript with Search Box

1. First of all, load the Bootstrap and Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.

<!-- Bootstrap CSS -->
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'>
<!-- Font Awesome CSS -->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'>

2. Create the HTML structure as follows:

<div class="container">
  <div class="row">
    <div class="col-lg-5 col-md-6 col-sm-8 mx-auto">
      <div class="card my-5">
        <h5 class="card-header bg-primary text-white">
          Todo List
        </h5>
        <div class="card-body">
          <div class="input-group mb-3">
            <input type="text" id="search" class="form-control" placeholder="Search todo">
            <div class="input-group-append">
              <span class="input-group-text"> <i class="fas fa-search"></i> </span>
            </div>
          </div>
          <ul class="list-group mb-3">
            <li class="list-group-item">
              <i class="far fa-square done-icon"></i>
              <i class="far fa-check-square done-icon"></i>
              <span class="todo-text">It's a dummy todo item</span>
              <i class="far fa-trash-alt"></i>
            </li>
            <li class="list-group-item done">
              <i class="far fa-square done-icon"></i>
              <i class="far fa-check-square done-icon"></i>
              <span class="todo-text">This task is complete</span>
              <i class="far fa-trash-alt"></i>
            </li>
            <li class="list-group-item">
              <i class="far fa-square done-icon"></i>
              <i class="far fa-check-square done-icon"></i>
              <span class="todo-text">Here is another item</span>
              <i class="far fa-trash-alt"></i>
            </li>
          </ul>
          <button id="clearBtn" type="button" class="btn btn-dark btn-sm">Clear All</button>
        </div>
        <div class="card-footer">
          <form id="form">
            <div class="input-group">
              <input type="text" class="form-control" id="todo" placeholder="Add new todo item">
              <div class="input-group-append">
                <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Add
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>  

2. After that, add the following CSS styles to your project:

.card {
    box-shadow: 0px 0px 3px 1px #ddd;
}

.list-group-item {
    padding: .5rem .75rem;
    border: 1px solid rgba(0, 0, 0, .07);
    display: flex;
    align-items: center;
}

.list-group-item:first-child {
    border-radius: 0;
}

.list-group-item:last-child {
    border-radius: 0;
}

.list-group-item i.fa-square {
    flex-grow: 0;
    cursor: pointer;
    order: 1;
}

.list-group-item i.fa-check-square {
    display: none;
}

.list-group-item i.fa-trash-alt {
    flex-grow: 0;
    cursor: pointer;
    color: #dc3545;
    order: 3;
}

.list-group-item i.fa-trash-alt:hover {
    color: #af1e2c;
}

.list-group-item .todo-text {
    flex-grow: 1;
    margin: 0 10px;
    order: 2;
}

.list-group-item.done i.fa-check-square {
    flex-grow: 0;
    cursor: pointer;
    color: #28a745;
    display: block;
}

.list-group-item.done i.fa-square {
    display: none;
}

.list-group-item.done .todo-text {
    text-decoration: line-through;
    color: #888;
}

3. Finally, add the following JavaScript code and done.

// Define all UI variable
const todoList = document.querySelector('.list-group');
const form = document.querySelector('#form');
const todoInput = document.querySelector('#todo');
const clearBtn = document.querySelector('#clearBtn');
const search = document.querySelector('#search');

// Load all event listners
allEventListners();


// Functions of all event listners
function allEventListners() {
    // Add todo event
    form.addEventListener('submit', addTodo);
    // Remove and complete todo event
    todoList.addEventListener('click', removeTodo);
    // Clear or remove all todos
    clearBtn.addEventListener('click', clearTodoList);
    // Search todo event
    search.addEventListener('keyup', searchTodo);
}


// Add todo item function
function addTodo(e) {
    if (todoInput.value !== '') {
        // Create li element
        const li = document.createElement('li');
        // Add class
        li.className = 'list-group-item';
        // Add complete and remove icon
        li.innerHTML = `<i class="far fa-square done-icon"></i>
                        <i class="far fa-check-square done-icon"></i>
                        <i class="far fa-trash-alt"></i>`;
        // Create span element
        const span = document.createElement('span');
        // Add class
        span.className = 'todo-text';
        // Create text node and append to span
        span.appendChild(document.createTextNode(todoInput.value));
        // Append span to li
        li.appendChild(span);
        // Append li to ul (todoList)
        todoList.appendChild(li);

        // Clear input
        todoInput.value = '';
    } else {
        alert('Please add todo');
    }

    e.preventDefault();
}


// Remove and complete todo item function
function removeTodo(e) {
    // Remove todo
    if (e.target.classList.contains('fa-trash-alt')) {
        if (confirm('Are you sure')) {
            e.target.parentElement.remove();
        }
    }

    // Complete todo
    if (e.target.classList.contains('todo-text')) {
        e.target.parentElement.classList.toggle('done');
    }
    if (e.target.classList.contains('done-icon')) {
        e.target.parentElement.classList.toggle('done');
    }
}


// Clear or remove all todos function
function clearTodoList() {
    todoList.innerHTML = '';
}


// Search todo function
function searchTodo(e) {
    const text = e.target.value.toLowerCase();
    const allItem = document.querySelectorAll('.list-group-item');
    for (let task of allItem) {
        const item = task.textContent;
        if (item.toLowerCase().indexOf(text) != -1) {
            task.style.display = 'flex';
        } else {
            task.style.display = 'none';
        }
    };
}

That’s all! hopefully, you have successfully integrated this to-do list with the search box code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X