Todo app | Drag & Drop | Svelte & Scss

Ayyye, nice to see another svelter around :) I ended up doing this challenge in svelte too

some real nice stuff here, for example loved the spin transition you did on the theme switcher. design looks pretty close, being nip picky on the desktop design the remove todo button should only appears on hover

somethings you could of done better is the dragging, I used SortableJS in my project but you could also use DraggableJS this would of saved you some time however in the sport of doing stuff yourself for the fun of it, your implementation is slighlty off putting for one you're blocking interactivity with the done switch and the remove button by making the whole div a draggable component, I would suggest making only the middle part the drag handle as that allows users to still easily move the todo-item but still let them easily click the remove and done switch. another reason why your own dragging logic feels wrong is because once you put your cursor off the todo-container it stops the drag, if you're going to do that I would suggest anchoring the drag-item on the x-axis (so only move the item up and down).

apart from the dragging logic being little wacky, I would also make sure you can't submit an empty todo (although this might be preference) also would make sure you set border: none; on the input:focus, so you don't get that out of place dotted line.

apart from all that, you did an awesome job! good stuff looking foward to maybe seeing you doing more challenges around here in svelte :)

Hello, MasterKrab! 👋

Wonderful job on this challenge! 👏 The to-do list works well and I like all of the small transitions and touches that you added! 😀 The spinning animation on the theme changer icon is especially cool! 🤩

It's also so cool to see that you used Svelte for this challenge (I did same thing, too). I hope you enjoyed it! 😄

The only small thing I suggest is to consider saving the current theme of the to-do list in local storage, as well. 😉

Of course, keep coding (and happy coding, too)! 😁

Looks really Good but at mobile width 375px depending on the size of the ToDo the circle selection button are getting smashed and becoming deformed other wise looks like you have a really nice solution in progress