Skip to content
Submitted over 4 years ago

Todo App With Christmas Theme, Local Storage | Svelte, Sortable.js

svelte
ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the Todo app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey, everybody! 👋

This was an awesome challenge that I enjoyed and in which I learned a lot! I used Svelte.js for the first time and it was pretty amazing. Svelte's features made it a lot easier to create a todo app like this and it was a lot of fun to learn! 👍

I added some transitions to make the actions smoother and a Christmas theme 🎄 (because it's drawing near to that special time of year) and used local storage to store the state of the to-do list and the most recently used theme. 😊

There are a few quirks that I'm aware of—the order of the items in the to-do list isn't saved in local storage if they are changed via drag-and-drop and there is no transition for the "Clear Completed" action because of the way I passed data around in my Svelte files. I almost wish I could redo this challenge and do a few things differently (such as make my code less ugly), but... IDK. 😅

Feedback is welcome and appreciated (I really hope everything works okay)! 😀

Happy coding (and happy holidays, too 🎅)! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Vaibhav Bhardwaj•150
    @VaibhavBhardwaj23

    Hey @ApplePieGiraffe, Amazing Design chief, Just one question, is there any way that we can add items to the todo-list?

  • Haybuka Paschal•670
    @Haybuka

    wow, nice... Good to know there is a functional library for drag and drop.. I Had to adapt one using vanilla js (my code), most i saw were not compatible with react... good job chief

  • Arsh Karpoor•940
    @ArshKarpoor

    This is very Nice

  • Grace•32,130
    @grace-snow

    This is really fun!

  • Connor Z•5,115
    @zuolizhu

    Hey APG!

    Finally someone tried the Svelte and I told you it is an amazing framework (well, actually it is a compiler LOL) right ? 😝 @mattstuddert I bet £1 you will fall in love with Svelte 😏. It is a good starting point for anyone just learned HTML, CSS, basic javascript and wants to try out some frameworks.

    I was about to asking how you did the drag and drop list, and then I just found you used sortablejs, nice package 🤩! I think you need to add the event listener called onEnd: function (event) {} for the Sortable object, within that function, you can grab the new ordered list and save into the local storage.

    I love the Christmas theme 🎄 you designed, so cuuuuute!!

    I don't think you need to redo this challenge, it is already perfect! Just keep it in there as a footprint, maybe few years latter you can watch back and see how you improved 🤪.

    Happy coding and happy holiday 🙌!

  • Matt Studdert•13,611
    @mattstuddert

    Amazing work on this challenge, APG! The more I see Svelte projects the more it makes me want to dive in. Your attention to detail is incredible and I love the Christmas theme. I agree with Em that it's my favourite of the 3 themes! 😍

    Keep up the awesome work!

  • Abhik•4,820
    @abhik-b

    One word for your solution AWESOME 👌👌👌

    Good Evening ApplePieGiraffe , You have done a excellent job 👏👏👏

    • Christmas theme is dope 🔥🔥
    • The line-through animation is also great
    • Drag and drop sorting is very smooth

    Lot to learn from you 💯

    Happy Coding ❤

  • Emmilie Estabillo•5,600
    @emestabillo

    Amazing work APG!! The Christmas theme was my favorite! Works really well. The only thing I would add, and this is purely ornamental (pun intended), would be to add a grab cursor for the drag and drop. Featured project, no doubt :-)

  • Roc Tanweer•2,500
    @RocTanweer

    Hello 👋 In the Storage section of the documentation of Sortable.js on GitHub, they have told how to save the state of the sorted list in the local storage. Hope it helps... Happy coding..!

  • tediko•6,700
    @tediko

    Hello, ApplePieGiraffe! 👋

    Excellent job as always! Congratulations on using the Svelte framework. Christmas theme is dope! You are not stopping! Nice to look at your rapid development.

    Have fun coding! 💪

  • Favourite Jome•1,110
    @jomefavourite

    Woo your solution is really amazing 🤩

    I've been battling with the same challenge for a week now using React.

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