Skip to content
Submitted about 2 years ago

TODO app solution with localStorage and drag and drop funcionality

Mateusz•180
@userMatMik
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

This project wasn't to hard to finish, but it had few tricky challenges. The first one was to create linear gradient in checkbox border and and background. The second one was drag-and-drop funcionality.

At first I wrote my own drag-and-drop funcionality. I learned how to use events such as dragstart, dragend and dragover. It worked fine on desktop but it didnt work on mobile. I read that drag-and-drop API over all not working on mobile browsers so I've decided that I will use sortableJS library and I was really impresed how fast you can create drag-and-drop funcionality with it.

I think my main lesson from this project was that I should use libraries way more often. There is no need to invent a wheel from the beginning :)

Community feedback

  • Eugenia•950
    @JaneMorozPosted about 2 years ago

    Hi, Mateusz! I love your solution ❤️

    The only thing I can suggest:

    • Add aria-label to the <button> tag with the class theme-switcher to improve accessibility.

    Keep it up! And good luck 🍀

    0
    Mateusz•180
    @userMatMikPosted about 2 years ago

    @JaneMoroz Hi, thank you for your kind words i really appreciate it. Ofc I forgot about aria-label and thanks for pointing this out.

    Have a great day Eugenia.

    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