Все привет! Пишу первую Тудушку свою, хочу обзавестись функцией отслеживания активных задач. Добился того, что считает количество новых задач, но не обновляется при удалении. Понимаю, что из todoAdd переменную не видит в listenDeleteTodo, но ничего не могу придумать, что бы решить эту проблему.....Помогите наладить этот процесс)
'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);
});
// for(let i=0; i < document.querySelectorAll('li').length; i++) {
// allTasks.innerHTML = `Всего задач: ${[i]}`;
// }
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);
let list = document.querySelectorAll('ul.todos > li');
tasks.push(list);
allTask();
ul.appendChild(li).append(textSpan, deleteButton);
input.value = "";
listenDeleteTodo(deleteButton, li);
}
function onClickTodo(event) {
if (event.target.tagName === "LI" || 'text') {
event.target.classList.toggle("checked");
}
}
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", () => {
i.remove();
console.log('remove');
tasks.splice(tasks.indexOf(list), 1 );
allTask();
});
}
function allTask() {
let count = tasks.length;
allTasks.textContent = `Всего задач: ${[count]}`;
}
}
document.addEventListener("DOMContentLoaded", ToDo);
<!DOCTYPE html>
<html>
<head>
<title>Приложение To-Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</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 type="text/javascript" src="index.js"> </script>
</body>
</html>
|
Код:
|
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;
} |
