Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#svelte
P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (1)
error

This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.

<button arialabel="change the theme of the app" class="svelte-21kiri"><svg xmlns="http://www.w3.org/2...</button>

ApplePieGiraffe’s questions for the community

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

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

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

@VaibhavBhardwaj23

Posted

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

1

Haybuka Paschalβ€’ 670

@Haybuka

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Haybuka

Thank you! πŸ˜€

0

Arsh Karpoorβ€’ 940

@ArshKarpoor

Posted

This is very Nice

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@ArshKarpoor

TY, ArshKarpoor! πŸ˜€

0

P
Graceβ€’ 23,610

@grace-snow

Posted

This is really fun!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@grace-snow

TY, Grace! 😊

0

Connor Zβ€’ 5,115

@zuolizhu

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@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

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

@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

P
Matt Studdertβ€’ 13,591

@mattstuddert

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@mattstuddert

Thanks so much, Matt! 😊

0

Abhikβ€’ 4,840

@abhik-b

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@abhik-b

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

1

P
Emmilie Estabilloβ€’ 5,420

@emestabillo

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@emestabillo

Thanks a lot, emestabillo! 😊 And I think adding a grab cursor would be a good idea, too! πŸ‘

1

Roc Tanweerβ€’ 2,480

@RocTanweer

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@RocTanweer

Oh, thanks for the tip RocTanweer! πŸ˜€ I didn't know that when I worked on this challenge! πŸ˜…

0

Roc Tanweerβ€’ 2,480

@RocTanweer

Posted

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

1

Roc Tanweerβ€’ 2,480

@RocTanweer

Posted

@RocTanweer I have made the todo app today... Please πŸ™ visit my profile and give feedback

0

tedikoβ€’ 6,170

@tediko

Posted

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


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tediko

Thanks, tediko! 😊

0

Favourite Jomeβ€’ 1,110

@jomefavourite

Posted

Woo your solution is really amazing 🀩

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

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@jomefavourite

Thanks, jomefavourite! Good luck with your challenge (look forward to seeing it, too)! πŸ‘

1

Favourite Jomeβ€’ 1,110

@jomefavourite

Posted

Thanks @ApplePieGiraffe

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!