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";
}
button.trash {
background-color: none;
border: none;
color: gray;
padding: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
border-radius: 50%;
}
.todos li {
cursor: pointer;
font-size: 15px;
padding: 3px 0px;
}
.checked {
color: gray;
text-decoration: line-through;
}
.todos li span.todo-text {
padding: 10px 0px;
}
#todo {
margin: 0 auto;
max-width: 300px;
height: 100%;
background: white;
position: relative;
}
</style>
</head>
<body>
<div id="todo">
<h1>Мой список дел</h1>
<p1 id="p1">Всего задач:</p1>
<p2 id="p2">Задач активно:</p2>
<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="clear">Очистить</button>
</div>
</div>
<script>
'use strict';
function ToDo() {
const input = document.querySelector("input.title");
const addBtn = document.querySelector("button.add");
const ul = document.querySelector("ul.todos");
const clearButton = document.querySelector("button.clear");
const allTasks = document.querySelector('#p1')
const activeTasks = document.querySelector('#p2')
let tasks = [];
ul.addEventListener("click", onClickTodo);
ul.querySelectorAll('li').forEach(n => {
listenDeleteTodo(n.querySelector('.todo-trash'), n)
});
clearButton.addEventListener("click", () => {
ul.innerHTML = "";
localStorage.removeItem('todos', ul.innerHTML);
tasks.length = 0;
allTask();
});
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);
tasks.push(li);
allTask();
ul.appendChild(li).append(textSpan, deleteButton);
input.value = "";
input.focus();
listenDeleteTodo(deleteButton, li);
}
function onClickTodo(event) {
let target = event.target.closest("LI");
if (target) {
target.classList.toggle("checked");
allTask();
}
}
addBtn.addEventListener('click', () => {
if (input.value.trim().length) {
todoAdd();
}
})
input.addEventListener('keydown', (e) => {
if (input.value.trim().length && e.keyCode === 13) {
todoAdd();
}
})
function listenDeleteTodo(button, i) {
button.addEventListener("click", (event) => {
event.preventDefault();
i.remove();
console.log('remove');
tasks.splice(tasks.indexOf(i), 1);
allTask();
});
}
function allTask() {
let count = tasks.length;
let checked = tasks.filter(li => li.classList.contains('checked')).length
allTasks.textContent = `Всего задач: ${count}`;
activeTasks.textContent = `Задач активно: ${count - checked}`;
}
let list = document.querySelectorAll('ul.todos > li');
tasks.push(...list);
allTask();
}
document.addEventListener("DOMContentLoaded", ToDo);
</script>
</body>
</html>