JavaScript-Todo-List-Project

How to build a Todo List App with JavaScript

This is a sample project how to create a todo list using Jaascript with the basic knowledge of JavaScript. You will find how to used the filter function, addEventListener and array changing with Modren es6 Arrow functions, etc.

Link

https://javascripttodolist.web.app/

App.js file

const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
const message = document.querySelector('.message');
const searchForm = document.querySelector('.search');
const generateTemplate = todo =>{
const html = <li class="list-group-item d-flex justify-content-between align-items-center"> <span>${todo}</span> <i class="far fa-trash-alt delete"></i> </li> ;
list.innerHTML += html;
}
addForm.addEventListener('submit', e=>{
e.preventDefault();
const todo = addForm.add.value.trim();
if(todo.length){
message.classList.add('d-none');
addForm.add.classList.add('class', 'success');
generateTemplate(todo);
addForm.reset();
addForm.add.focus();
message.textContent = 'Great! You added your todo item.';
message.classList.remove('alert-danger');
message.classList.add('alert-success');
}else{
message.classList.add('d-block');
addForm.add.classList.add('class', 'error');
message.textContent = 'Oops! Please enter your item.';
message.classList.remove('alert-success');
message.classList.add('alert-danger');
}

});
//delete todo
list.addEventListener('click', e=>{
if(e.target.classList.contains('delete')){
    e.target.parentElement.remove();
}

})
const showTodoList = (searchText) =>{
console.log(searchText)
childsOfList= Array.from(list.children);
    Array.from(list.children)
    .filter(li =>{ 
         return !li.textContent.toLowerCase().includes(searchText)  
     }).forEach(li=>{
        li.classList.add('filtered')
    }) 

    Array.from(list.children)
    .filter(li =>{ 
         return li.textContent.toLowerCase().includes(searchText)  
     }).forEach(li=>{
        li.classList.remove('filtered')
    }) 

}
//keyup search
searchForm.search.addEventListener('keyup', e=>{
e.preventDefault();
const searchText = e.target.value.trim().toLowerCase();
showTodoList(searchText);
})

Index.html file

    
    
    
    
    
    
    <title>Javascript Todo List</title>


<div class="container">

    <header class="text-center text-light my-4">
        <h1 class="mb-4">Todo List by Javascript</h1>
        <form class="search">
            <input class="form-control m-auto" type="text" name="search" placeholder="search todos" />
        </form>
    </header>


    <ul class="list-group todos mx-auto text-light">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>Play Guiter</span>
            <i class="far fa-trash-alt delete"></i>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>Clean the floors</span>
            <i class="far fa-trash-alt delete"></i>
        </li>

        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>Clean Kitchen </span>
            <i class="far fa-trash-alt delete"></i>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>Watch TV</span>
            <i class="far fa-trash-alt delete"></i>
        </li>

        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>BUY MILK</span>
            <i class="far fa-trash-alt delete"></i>
        </li>

        <li class="list-group-item d-flex justify-content-between align-items-center">
            <span>Pay House Rent</span>
            <i class="far fa-trash-alt delete"></i>
        </li>

    </ul>

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

        <div class="alert message"></div>
        <label class="text-light">Add a new todo...</label>

        <input class="form-control m-auto" type="text" name="add" />
        <input type="submit" value="Submit" class="mt-3 btn btn-secondary" />
    </form>

</div>


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