Сделать список дел на Javascript?

Question

[Михаил]

Всем привет!
Пытаюсь сделать список дел на Javascript с целью изучения языка.
Сверстал один item, т.е. как должен выглядеть один пункт в списке дел.
Этот первый item находится в "Скрытом хранилище". #hran{display: none;}
Написал функцию добавления дел. Они добавляются. Т.е. копируется (cloneNode) первоначальный item и потом он вставляется (appendChild) в список. При этом у первоначального item есть класс first. При копировании этот класс должен удаляться и присваиваться класс added. И с этим классом уже помещаться в список дел.
Для наглядности вывел несколько массивов - массивы item, first, added. В строке под списком показывается количество элементов в каждом из этих массивов.
Есть некоторые вопросы:
- Не понимаю, как оставить класс first у первого item?
- Почему массив item: undefined?
- Почему в массиве first 1 элемент (так-то оно и должно быть по идее, но он же удаляется у первого item)
- Почему кнопка "удалить" которая должна окрасить в желтый цвет item в котором она находится, не окрашивает его
(тут я пробовал разные варианты , и parentElement , и parentNode)

Пример вот тут
https://codepen.io/mk3mk/pen/gNvazz?editors=0110

Написать всё до конца не прошу, только то, что на данном этапе не понятно, прошу пояснить, дальше буду сам пытаться делать...

Comments

[Сергей Соколов]

Для изучения и понимания:

Спойлер: готовые реализации

todomvc.com

[Михаил]

когда смотрю готовые решения, еще больше запутываюсь. Поэтому решил попробовать сделать сам с нуля... Но все равно спасибо, посмотрим

[Сергей Соколов]

Михаил, у вас, как мне кажется, изначально архитектура не лучшая. Сейчас модно «в реактивность», разделять данные и их отображение, повторяющиеся штуки делать компонентами. Смотреть чужой код полезно: и общую идею понять и какие-то мелочи могут понравиться/запомниться.

[Михаил]

по поводу архитектуры - это Вы верно подметили : )
но я насколько слышал, многие программисты сначала пишут программу как понимают, потом ее рефакторят... т.е. сначала сделать, чтобы работало, а архитектура - это уже потом
но это всё приходит с опытом

Answer 1

[Сергей Соколов]

- Не понимаю, как оставить класс first у первого item?

Для чего этот класс вообще понадобился? Если для нахождения темплейта блока для последующего копирования, то так не очень. Дайте ему отдельный id, например. А для создаваемых дел назначайте уникальный id при клонировании.attr('id',new_id) Вообще достаточно один раз при запуске приложения сохранить где-то узел образца, убрав его из DOM. И дальше работать с той константой.

- Почему массив item: undefined?

ПОтому, что item не массив, а единственный узел. querySelector() возвращает первый найденный DOM-узел.

- Почему в массиве first 1 элемент (так-то оно и должно быть по идее, но он же удаляется у первого item)

first определяется только один раз в начале скрипта, когда такой только один. И более не переопределяется.

- Почему кнопка "удалить" которая должна окрасить в желтый цвет item в котором она находится, не окрашивает его

Первым делом, не вешается слушатель события клика, потому, что deleteThis у вас это коллекция узлов. У неё нет метода addEventListener(). Он есть у каждого её элемента. Надо пройтись циклом и навесить слушателя на каждого.

Откройте консоль браузера - там есть несколько интересных строк с ошибками.
Вставляйте повсюду console.log(), чтобы посмотреть, когда что срабатывает и какие там значения у переменных.

Comments

[Михаил]

спасибо!

[Михаил]

https://codepen.io/mk3mk/pen/wLmzaQ?editors=1010

тут получается после копирования - два элемента с id="first"
а как удалить у второго элемента этот id ?

[Сергей Соколов]

Михаил, выше же написал: newNode.attr('id',new_id)