Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Todo App with SASS/vanilla JS + added search function

#sass/scss
DanielK 440

@DanK1368

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys,

Please provide some feedback. :)

The app isnt perfect, I still have some problems to fix:

  1. background-image: url("../../../assets/icon-check.svg"); This is my file path for the check mark inside the button. However, github pages isnt displaying it. Isnt that the relative file path to be used if the file is 3 layers deep?

  2. The draggable feature works on the todo items that are already there. However, the code breaks once new todos are added? What am I doing wrong?

Thanks guys :)

Community feedback

Byron 2,180

@byronbyron

Posted

@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

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

0
Byron 2,180

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

0
DanielK 440

@DanK1368

Posted

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

0
Byron 2,180

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord