Skip to content
Submitted almost 4 years ago

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

ApplePieGiraffe•30,545
@ApplePieGiraffe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Todo app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

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

Community feedback

  • Vaibhav Bhardwaj•150
    @VaibhavBhardwaj23Posted over 2 years ago

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

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 2 years ago

    @VaibhavBhardwaj23

    Thank you!

    Yes, you can add items to the to-do list by typing them into the textfield at the top of the to-do list and hitting the "Enter" key to add them to the column below. 😉

    1
    Vaibhav Bhardwaj•150
    @VaibhavBhardwaj23Posted over 2 years ago

    @ApplePieGiraffe Thank You! I was clicking on the circle in the input box.

    1
  • Haybuka Paschal•670
    @HaybukaPosted over 2 years ago

    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

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 2 years ago

    @Haybuka

    Thank you! 😀

    0
  • Arsh Karpoor•940
    @ArshKarpoorPosted almost 4 years ago

    This is very Nice

    2
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @ArshKarpoor

    TY, ArshKarpoor! 😀

    0
  • Grace•31,230
    @grace-snowPosted almost 4 years ago

    This is really fun!

    2
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @grace-snow

    TY, Grace! 😊

    0
  • Connor Z•5,115
    @zuolizhuPosted almost 4 years ago

    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 🙌!

    2
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @zuolizhu

    Thanks a lot, zuolizhu! ❤️

    I'm so glad I took your advice and used Svelte! It really is amazing and makes everything so much cleaner and easier! 😆

    And thanks for the tip for saving the state of the reordered to-do list—I was just wondering how I could do that! 😄

    Happy holidays, as well! 🎄

    1
    Matt Studdert•13,611
    @mattstuddertPosted almost 4 years ago

    @zuolizhu haha, I'm sure I will love it! Next on my list of new things to play around with is Three.js. Svelte will be after that for sure! 🙌

    0
  • Matt Studdert•13,611
    @mattstuddertPosted almost 4 years ago

    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!

    2
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @mattstuddert

    Thanks so much, Matt! 😊

    0
  • Abhik•4,840
    @abhik-bPosted almost 4 years ago

    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 ❤

    2
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @abhik-b

    Thanks a lot, abhik-b! Happy coding, as well! 😁

    1
  • Emmilie Estabillo•5,540
    @emestabilloPosted almost 4 years ago

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

    2
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @emestabillo

    Thanks a lot, emestabillo! 😊 And I think adding a grab cursor would be a good idea, too! 👍

    1
  • Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

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

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @RocTanweer

    Oh, thanks for the tip RocTanweer! 😀 I didn't know that when I worked on this challenge! 😅

    0
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    @ApplePieGiraffe glad I could help I will learn as much as I can from you 😊

    1
    Roc Tanweer•2,500
    @RocTanweerPosted over 3 years ago

    @RocTanweer I have made the todo app today... Please 🙏 visit my profile and give feedback

    0
  • tediko•6,680
    @tedikoPosted almost 4 years ago

    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! 💪

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @tediko

    Thanks, tediko! 😊

    0
  • Favourite Jome•1,110
    @jomefavouritePosted almost 4 years ago

    Woo your solution is really amazing 🤩

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

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    @jomefavourite

    Thanks, jomefavourite! Good luck with your challenge (look forward to seeing it, too)! 👍

    1
    Favourite Jome•1,110
    @jomefavouritePosted almost 4 years ago

    Thanks @ApplePieGiraffe

    0

Please log in to post a comment

Log in with GitHub

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