Что то типа этого
<div class="app" id="app">
<input class="type" type="search"placeholder="Добавить дело">
<button id="add"> add</button>
<button id="clear"> clear</button>
<div class="out">
</div>
</div>
<script>
let input = document.querySelector('.type'),
out = document.querySelector('.out'),
add = document.getElementById('add'),
clear = document.getElementById('clear'),
list = {}; // Объект в котором будет храниться наш todo-список
// Функция рендера, каждый раз после изменения объекта list будет заново перерисовывать контент
const renderList = () => {
out.innerHTML = ''// Очищаем блок out
for(let i in list){
// Через цикл пробегаемся через объект, и создаем соотвественные чекбоксы с класом и data-id
// data-id мы создаем когда добавляем новый todo элемент в функции addToList
let comp = document.createElement('div')
if(list[i].checked){
comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}" checked/> ${list[i].value}`
} else {
comp.innerHTML = `<input type="checkbox" class="checkbox-item" data-id="${i}"/> ${list[i].value}`
}
out.appendChild(comp)
}
}
const toggleCheckbox = (e) => {
// Изменяем статус чекбокса в объекте list
if(!e.target.classList.contains('checkbox-item')) return;
const todoId = e.target.getAttribute('data-id');
list[todoId].checked = !list[todoId].checked
}
// Функция для добавления элемента todo
const addToList = () => {
const todoId = '_' + Date.now() // Генерируем уникальный айдишник
// Это конкретный todo элемент по умолчанию checked:false
list[todoId] = {
value: input.value,
checked: false
}
input.value = ''// Очищаем форму ввода
renderList()
}
// Функция для очистки списка
// Через цикл бежим по объекту, если todo элемент имеет статус checked значит мы удаляем его из объекта
const clearList = () => {
for(let i in list){
if(list[i].checked){
delete list[i]
}
}
renderList()
}
// Слушатели событий
add.addEventListener('click', () => addToList())
clear.addEventListener('click', () => clearList())
out.addEventListener('click', () => toggleCheckbox(event))
</script>
