Todo App with SASS/vanilla JS + added search function

Community feedback

• 

  Byron•2,290

  @byronbyronPosted over 2 years ago

  @DanK1368 Looks good!

  1. background-image: url(../../assets/icon-check.svg); will get you the checkbox!
  2. 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

  0

  ---

  

  DanielK•440

  @DanK1368Posted over 2 years ago

  @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?

  0

  

  Byron•2,290

  @byronbyronPosted over 2 years ago

  @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.

  0

  

  DanielK•440

  @DanK1368Posted over 2 years ago

  @byronbyron Got it!! By the way, can you explain why the ids aren't correctly being set?

  0

  

  Byron•2,290

  @byronbyronPosted over 2 years ago

  @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.

  0