@byronbyron
Posted
@DanK1368 Looks good!
background-image: url(../../assets/icon-check.svg);
will get you the checkbox!- It sounds like your todo ids aren't correctly being set. I had a similar problem and solved it by using SortableJS and nanoid
Marked as helpful
@DanK1368
Posted
@byronbyron thanks, will make the update.
I saw that you just did the same challenge. The sortablejs makes it pretty easy, can you use that wirhout a framework?
@byronbyron
Posted
@DanK1368 Yes absolutely!
There's a spin off version for React (react-sortablejs), which is the one I used, but the main one can be used with vanilla javascript.
@DanK1368
Posted
@byronbyron Got it!! By the way, can you explain why the ids aren't correctly being set?
@byronbyron
Posted
@DanK1368 When I say ids, I don't necessarily mean HTML attributes like <li id="x">
, although I guess those could work. I mean that in order for reordering to work with new todo items, each item needs an index (kind of handled implicitly in javascript anyway) to show what order each item should be in the list, and a unique identifier so that reordering/completing/removing tasks doesn't break after reordering.
Update - Actually, I don't think ids are the issue, your todo app works without items having any noticeable unique identifiers 🤔
It smells like you might need some sort of event delegation. Like whacking an event listener on the parent <ul>
and listening for your 'dragstart' event on any new or existing <li>
s.