I’m building a small to-do app.
Right now I can only add single tasks, and was wondering is there a way to add multiple to-do lists with their own tasks.
For example, list named Monday (with “buy groceries”), Tuesday (with wash dishes) etc.
I would also like to be able to delete single tasks, as I can now.
Thanks!
Here is my code:
<body>
<div class="container">
<header class="text-center text-light my-4">
<h1 class="mb-4">To-do list</h1>
</header>
<form class="search text-center my-4">
<label class="text-light"></label>
<input
class="form-control m-auto"
type="text"
name="search"
autocomplete="off"
placeholder="search tasks..."
/>
</form>
<ul class="list-group todos mx-auto text-light">
<li
class="list-group-item d-flex justify-content-between align-items-center"
>
<span>airline ticket reservation</span>
<i class="far fa-trash-alt delete"></i>
</li>
</ul>
<form class="add text-center my-4">
<label class="text-light">Add new to-do item</label>
<input
class="form-control m-auto"
type="text"
name="add"
autocomplete="off"
placeholder="type here..."
/>
</form>
</div>
<script src="app.js"></script>
…and my js code:
const addForm = document.querySelector('.add');
const list = document.querySelector('.todos');
const search = document.querySelector('.search input');
const generateTemplate = todo => {
let 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){
generateTemplate(todo);
addForm.reset();
}
});
//delete item
list.addEventListener('click', e => {
if(e.target.classList.contains('delete')){
e.target.parentElement.remove();
}
});
//search
const filterTodos = term => {
Array.from(list.children)
.filter((todo) => !todo.textContent.includes(term))
.forEach((todo) => todo.classList.add('filtered'))
Array.from(list.children)
.filter((todo) => todo.textContent.includes(term))
.forEach((todo) => todo.classList.remove('filtered'))
}
//keyup
search.addEventListener('keyup', () => {
const term = search.value.trim();
filterTodos(term);
});