Отслеживание количества активных задач в ToDo
Все привет! Пишу первую Тудушку свою, хочу обзавестись функцией отслеживания активных задач. Добился того, что считает количество новых задач, но не обновляется при удалении. Понимаю, что из 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>
Код:
|
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>
|
рони,
спасибо! Немножко некорректно работает список активных задач теперь после чекеда, но постараюсь обдумать все сам) |
Цитата:
|
Цитата:
Если создать большой список задач (8-10 пунктов) и удалять начиная не с последнего в списке, то активных задач становится на две меньше, вместо одной. Так же, если не добавлять задачи, а пользоваться только двумя стоковыми, то при удалении первой происходит аналогичная ситуация и активных задачи становится 0, когда должна быть одна. |
bizunowvova,
пост #2 строка 150 исправлена. |
Цитата:
|
| Часовой пояс GMT +3, время: 21:50. |