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

Draggable Todo App with Vue, Pinia, Tailwind CSS and Vue Draggable

#pinia#vue#tailwind-css
Yuki Lunβ€’ 190

@yukilun

Desktop design screenshot for the Todo app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there!πŸ‘‹ It was the first project that I incorporated the drag-and-drop feature.πŸŽ‰

βš™οΈBuilt With:

πŸ› οΈVue.js | πŸ—‚οΈPinia | 🎨Tailwind CSS | βœ‹Vue Draggable

Welcome and appreciate any feedback! πŸ€—

Community feedback

Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

Hi, Yuki! πŸ‘‹

I found your solution in Frontend Mentor's newsletter. Nice solution! πŸ‘

It is great that you allow people to drag and drop to order todo items. Amazing! πŸ‘

It will be better if you add a focus indicator to any interactive elements. Right now, I can only see the focus indicator on the theme-switcher button and the "Clear Completed" button.

Great solution! I hope this helps. πŸ˜„

Marked as helpful

1

Yuki Lunβ€’ 190

@yukilun

Posted

Hi @vanzasetia! πŸ‘‹

Thanks for your feedback! I'm glad you liked the drag and drop feature for ordering todo items.

I also noticed the accessibility issue with the customized checkbox and radio buttons. To address this, I've added styles using the :focus-within CSS pseudo-class, ensuring that all interactive elements are now focusable using the keyboard and have a visible focus indicator. πŸ˜„

Thanks for your advices for improving my solution. πŸ™

1
Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

@yukilun

Nice work, Yuki! Now I can fully use your application with my keyboard. πŸ‘

Keep it up! πŸ”₯

0

Please log in to post a comment

Log in with GitHub
Discord logo

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