Mly

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