Submitted over 3 years ago

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

#svelte

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Preview site View code

This is a solution for...

Todo app

HTML
CSS
JS

3intermediate

View challenge

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

@VaibhavBhardwaj23

Posted over 1 year ago

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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 1 year 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. 😉

Vaibhav Bhardwaj• 150

@VaibhavBhardwaj23

Posted over 1 year ago

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

Haybuka Paschal• 670

@Haybuka

Posted almost 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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 2 years ago

@Haybuka

Thank you! 😀

Arsh Karpoor• 940

@ArshKarpoor

Posted over 3 years ago

This is very Nice

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@ArshKarpoor

TY, ArshKarpoor! 😀

Grace• 27,710

@grace-snow

Posted over 3 years ago

This is really fun!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@grace-snow

TY, Grace! 😊

Connor Z• 5,115

@zuolizhu

Posted over 3 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 🙌!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 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! 🎄

Matt Studdert• 13,611

@mattstuddert

Posted over 3 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! 🙌

Matt Studdert• 13,611

@mattstuddert

Posted over 3 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!

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@mattstuddert

Thanks so much, Matt! 😊

Abhik• 4,840

@abhik-b

Posted over 3 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 ❤

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@abhik-b

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

Emmilie Estabillo• 5,540

@emestabillo

Posted over 3 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 :-)

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@emestabillo

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

Roc Tanweer• 2,500

@RocTanweer

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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted about 3 years ago

@RocTanweer

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

Roc Tanweer• 2,500

@RocTanweer

Posted about 3 years ago

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

Roc Tanweer• 2,500

@RocTanweer

Posted about 3 years ago

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

tediko• 6,560

@tediko

Posted over 3 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! 💪

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@tediko

Thanks, tediko! 😊

Favourite Jome• 1,110

@jomefavourite

Posted over 3 years ago

Woo your solution is really amazing 🤩

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

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@jomefavourite

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

Favourite Jome• 1,110

@jomefavourite

Posted over 3 years ago

Thanks @ApplePieGiraffe

Please log in to post a comment

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