и это мне понравилось еще :lol: :
NovichokJS Кандидат Javascript-наук Карма: +12 |
Рони, у меня уже получилось всё синхронизировать и теперь работает как надо, спасибо!!!
|
NovichokJS,
делайте полноценные примеры, и менять надо только состояние const tasks, остальное всё лучше перенести в render |
Цитата:
касательно этого "менять надо только состояние const tasks, остальное всё лучше перенести в render" - помогите пожалуйста. Сейчас функционально то работает. Но понятно, что нужно улучшить код, рефакторинг...Вот весь итоговый код:
<body>
<h1 class="title">Todo List</h1>
<main class="todo-list">
<div class="actions">
<input class="task-input" type="text" />
<button class="btn create-task-btn">Create</button>
</div>
<ul class="list"></ul>
</main>
<script src="index.js"></script>
</body>
const tasks = [
{ text: 'Buy milk', done: false },
{ text: 'Pick up Tom from airport', done: false },
{ text: 'Visit party', done: false },
{ text: 'Visit doctor', done: true },
{ text: 'Buy meat', done: true },
];
const listElem = document.querySelector('.list');
const renderTasks = tasksList => {
const listItemsElems = tasksList
.sort((a, b) => a.done - b.done)
.map(({ text, done }) => {
const listItemElem = document.createElement('li');
listItemElem.classList.add('list__item');
if (done) {
listItemElem.classList.add('list__item_done');
}
const checkboxElem = document.createElement('input');
checkboxElem.setAttribute('type', 'checkbox');
checkboxElem.checked = done;
checkboxElem.classList.add('list__item-checkbox');
listItemElem.append(checkboxElem, text);
return listItemElem;
});
listElem.append(...listItemsElems);
};
renderTasks(tasks);
const clickButton = document.querySelector('.create-task-btn');
const handlerButton = () => {
const getTask = document.querySelector('.task-input');
if (getTask.value !== '') {
tasks.push({ text: getTask.value, done: false });
const getListItemElem = document.createElement('li');
getListItemElem.classList.add('list__item');
getListItemElem.innerText = getTask.value;
const getCheckboxElem = document.createElement('input');
getCheckboxElem.setAttribute('type', 'checkbox');
getCheckboxElem.classList.add('list__item-checkbox');
listElem.prepend(getListItemElem);
getListItemElem.prepend(getCheckboxElem);
getTask.value = '';
}
};
clickButton.addEventListener('click', handlerButton);
const handlerChexbox = () => {
const lis = Array.from(listElem.querySelectorAll('.list__item'));
const before = [],
after = [];
for (let li of lis) {
if (li.querySelector(':checked')) {
li.classList.add('list__item_done');
after.push(li);
} else {
li.classList.remove('list__item_done');
before.push(li);
}
}
listElem.append(...before, ...after);
};
listElem.addEventListener('click', handlerChexbox);
Как привести к такому порядку: при добавлении / изменении задачи - сначало добавить бы / обновить соответствующий элемент в массиве, где хранятся таски. После этого, заново отрисовать весь список в соответствии с обновленным массивом - вызов функции render. |
NovichokJS,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<h1 class="title">Todo List</h1>
<main class="todo-list">
<div class="actions">
<input class="task-input" type="text" />
<button class="btn create-task-btn">Create</button>
</div>
<ul class="list"></ul>
</main>
<script>
const tasks = [{
text: 'Buy milk',
done: false
},
{
text: 'Pick up Tom from airport',
done: false
},
{
text: 'Visit party',
done: false
},
{
text: 'Visit doctor',
done: true
},
{
text: 'Buy meat',
done: true
},
];
const listElem = document.querySelector('.list');
const renderTasks = tasksList => {
const listItemsElems = tasksList
.sort((a, b) => a.done - b.done || (a.text > b.text ? 1 : -1))
.map(({
text,
done
}, i) => {
const listItemElem = document.createElement('li');
listItemElem.classList.add('list__item');
if (done) {
listItemElem.classList.add('list__item_done');
}
const checkboxElem = document.createElement('input');
checkboxElem.setAttribute('type', 'checkbox');
checkboxElem.checked = done;
checkboxElem.dataset.i = i;
checkboxElem.classList.add('list__item-checkbox');
listItemElem.append(checkboxElem, text);
return listItemElem;
});
listElem.innerHTML = '';
listElem.append(...listItemsElems);
};
renderTasks(tasks);
const clickButton = document.querySelector('.create-task-btn');
const handlerButton = () => {
const getTask = document.querySelector('.task-input');
let text = getTask.value.trim();
if (text) {
tasks.push({
text,
done: false
});
getTask.value = '';
renderTasks(tasks);
}
};
clickButton.addEventListener('click', handlerButton);
const handlerChexbox = ({
target: {
dataset: {
i
}
}
}) => {
tasks[i].done = !tasks[i].done;
renderTasks(tasks);
};
listElem.addEventListener('change', handlerChexbox);
</script>
</body>
</html>
|
спасибо, круто!
|
правда вот только не понял вообще что тут происходит:
const handlerChexbox = ({
target: {
dataset: {
i
}
}
}) => {
tasks[i].done = !tasks[i].done;
renderTasks(tasks);
};
|
NovichokJS,
при формировании checkbox записывается его индекс в dataset. строка 54 checkboxElem.dataset.i = i; когда происходит изменение этого элемента в listElem. строка 84
listElem.addEventListener('change', handlerChexbox);
этот индекс извлекается из dataset, находится элемент массива (объект) с таким же индексом и в этом объекте изменяется свойство done, на противоположное, было false, станет true и наоборот. |
NovichokJS,
тоже самое ...
const handlerChexbox = (event) => {
let target = event.target;
let i = target.dataset.i;
let obj = tasks[i];
if(obj.done === true) obj.done = false;
else obj.done = true;
renderTasks(tasks);
};
|
теперь понял, спасибо!
|
| Часовой пояс GMT +3, время: 19:14. |