bizunowvova,
медитируйте построчно)))
<!DOCTYPE html>
<html>
<head>
<title>Приложение To-Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
button.trash::after {
content: "Del";
}
</style>
</head>
<body>
<div id="todo">
<h1>Мой список дел <i id="pensil" class="fas fa-pencil-alt"></i></h1>
<input type="text" placeholder="Добавить список" class="title">
<button type="text" class="add">Добавить</button>
<ul class="todos">
<li>
<span calss="todo-text">
Прикрутить добавление по ентер
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
</li>
<li>
<span calss="todo-text">
добавить кнопку к инпут
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
</li>
</ul>
<div id="buttons">
<button class="save">Сохранить</button>
<button class="clear">Очистить</button>
<button class="showTips">Справка</button>
</div>
</div>
<div id="overlay">
<a href="javascript:void(0)" class="closeTips">×</a>
<ul class="tips">
<li>Чтобы спрятать или показать поле ввода, кликните на карандаш</li>
<li>Для добавления списка дел напишите текст в поле ввода и нажмите Ввод</li>
<li>Чтобы удалить один пункт, наведите на него и нажмите на значок корзины</li>
<li>Чтобы удалить все списки дел, нажмите "Очистить"</li>
<li>Нажмите "Сохранить", чтобы сохранить список дел на потом</li>
</ul>
</div>
<script>
'use strict';
function ToDo() {
const input = document.querySelector("input.title");
const addBtn = document.querySelector("button.add");
const ul = document.querySelector("ul.todos");
ul.querySelectorAll('li').forEach(li => listenDeleteTodo(li.querySelector('.todo-trash'), li));
function todoAdd() {
const li = document.createElement('li');
const textSpan = document.createElement("span");
textSpan.classList.add("todo-text");
const newTodo = input.value;
textSpan.append(newTodo);
const deleteButton = document.createElement('span');
deleteButton.classList.add("todo-trash");
const button = document.createElement("button");
button.type = 'text';
button.classList.add("trash");
deleteButton.appendChild(button);
ul.appendChild(li).append(textSpan, deleteButton);
input.value = "";
listenDeleteTodo(deleteButton, li);
}
addBtn.addEventListener('click', () => {
if (input.value.trim().length) {
todoAdd();
}
})
function listenDeleteTodo(button, li) {
button.addEventListener("click", () => {
li.remove();
console.log('remove');
});
}
}
document.addEventListener("DOMContentLoaded", ToDo);
</script>
</body>
</html>