и это мне понравилось еще :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, время: 22:24. |