@Mecitan
Начинающий web-разработчик

Как добавить элементы todo List в массив для дальшейше работы с ними? И как поменять местами checkbox?

Приветствую! Решил написать свой todo list. Задача стоит следующая. Создать список, с чекбоксами, в который будут помещаться какие-либо действия. В планах сделать так, чтобы выполненные задачи удалялись из списка и оставались только активные. Соответственно будет две кнопочки под списком "Активные" и "Выполненные". При нажатии на одну из них происходила бы фильтрация и выводила те или иные задачи из списка. Примерно предполагаю, что понадобится два метода filter + reduce.

Собственно с первой задачей я справился, почти. Элементы списка добавляются. input очищается сразу же после нажатия клавиши enter. Только вот чекбоксы находятся с правой стороны. Как сделать так, чтобы они были слева?

Через typeof посмотрел, что мои элементы относятся к объекту. Логично, чтобы выполнить вторую часть задачи. Надо эти объекты добавить в массив. Знаю, что надо добавлять их через push. Но не могу понять, как правильно написать условие, чтобы это сделать. Вот тут мне нужна Ваша помощь.

let input = document.querySelector('#elem');
let ul = document.createElement('ul');
let toDo = [];

document.body.append(ul);

input.addEventListener('change', () => {
    let li = document.createElement('li');

    let checkBox = document.createElement('input');
        checkBox.type = 'checkbox';
        checkBox.checked = false;

    /* добавляем элементы списка */    
    li.innerHTML = input.value;
    li.appendChild(checkBox);
    ul.appendChild(li);

    /* Очищаем input */
    if (input.value == input.value) {
        input.value = '';
    } 
});


  • Вопрос задан
  • 67 просмотров
Решения вопроса 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Работает? Не трогай.
Вопрос: Как сделать так, чтобы они были слева?
Ответ:
Строки:
li.innerHTML = input.value;
li.appendChild(checkBox);

Замените на:
li.appendChild(checkBox);
li.innerHTML += input.value;

И в CSS
li > input[type="ckeckbox"] {
  float: left;
}


Вопрос: Знаю, что надо добавлять их через push. Но не могу понять, как правильно написать условие, чтобы это сделать. Вот тут мне нужна Ваша помощь.
Ответ:
У вас в коде небольшая каша-малаша.
Создайте два массива, с выполненными задачами и не выполненными.

При клике на чекбокc, смотрите на свойство checked у чекбокса, если true - удаляем из массива с не выполненными задачами и пушим в массив к выполненным и рендерим. Если false - обратное действие.
По клику на кнопку "Показать выполненные" рендерим массив с выполненными. И, при клике на "Показать не выполненные", соответственно, рендерим массив с не выполненными.

Так-же:
- Не стоит хранить всю ноду, достаточно текст задачи. Во время рендера пробегаем по массиву и вставляем строки с задачами в шаблон. Из-за того, что todoitem-ы в разных массивах - не надо хранить лишнюю информацию о статусе конкретного итема.
- Стоит отказаться от события change в пользу события клика у кнопки add (или, в вашем случае - нажатия на кнопку Enter на клавиатуре). Потому, что вам нужно обрабатывать ввод только в том случае, если пользователь нажал Enter. Если кликнуть вне инпута - то, текст в инпуте добавляеться в список. Не совсем ожидаемая реакция программы на клик вне.

Вот, набросал вам пример на скорую руку.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
25 янв. 2021, в 13:34
3000 руб./за проект
25 янв. 2021, в 13:09
3001 руб./за проект
25 янв. 2021, в 13:08
2000 руб./за проект