JavaScript-Todo-List-Project

Link

https://javascripttodolist.web.app/

App.js file

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

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