Todo app | Drag & Drop | Svelte & Scss

Community feedback

• 

  P

  Nathan•830

  @YofouPosted over 3 years ago

  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 :)

  2

  ---

  

  MasterKrab•940

  @MasterKrabPosted over 3 years ago

  @Yofou

  I hadn't realized that the delete button should only appear on hover.

  The outline in the input:focus is for accessibility, in the checkboxes and buttons I use focus-visible but in the input text that doesn't work.

  I want to do the drag and drop on my own, I will try to improve it, I will consider your advice.

  It's my first project with svelte, I like it very much.

  Thank you very much!

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  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)! 😁

  1

  ---

  

  MasterKrab•940

  @MasterKrabPosted over 3 years ago

  @ApplePieGiraffe Good idea, Svelte is very good, I really enjoyed it.

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @MasterKrab

  That's good to hear! Keep Svelting! 😆

  1
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  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

  1

  ---

  

  MasterKrab•940

  @MasterKrabPosted over 3 years ago

  @palgramming Thank you so much!

  1

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @MasterKrab also you are one of the few people I have seen do this project that had the default todo's included in the page onload that was a nice touch

  1

  

  MasterKrab•940

  @MasterKrabPosted over 3 years ago

  @palgramming Thanks, glad to hear it, I'm trying to improve the drag & drop.

  0

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @MasterKrab well this looks worth a try someone used it the other week https://shopify.github.io/draggable/examples/simple-list.html

  1