Responsive Todo App with Drag-and-Drop and Local Storage

What are you most proud of, and what would you do differently next time?

I’m most proud of implementing the drag-and-drop functionality using the HTML Drag and Drop API, which allows users to reorder todos seamlessly. It was a challenging feature, but the result feels intuitive and enhances the user experience. I’m also proud of adding local storage to persist todos and theme preferences across page refreshes, making the app more practical.

Next time, I’d focus on improving accessibility earlier in the process. For example, the drag-and-drop feature currently lacks keyboard support, which limits its usability for some users. I’d also explore using a CSS methodology like BEM to better organize my styles and make the codebase more maintainable.

What challenges did you encounter, and how did you overcome them?

One challenge was implementing the drag-and-drop functionality. I initially struggled with reordering the todos array correctly when dropping an item. I overcame this by carefully tracking the dragged and target items’ indices and using splice to reorder the array, then re-rendering the list.

Another challenge was ensuring responsiveness across all screen sizes, especially with the background images. I used media queries to switch between mobile and desktop background images and adjusted the layout for screens as small as 320px, ensuring the app remains usable and visually appealing.

What specific areas of your project would you like help with?

I’d like feedback on improving the accessibility of the drag-and-drop feature. Specifically, how can I add keyboard support so users can reorder todos without a mouse? I’d also appreciate suggestions on optimizing my CSS for better maintainability—perhaps using a methodology like BEM or CSS-in-JS. Finally, I’m curious if there are better ways to manage state in a vanilla JavaScript app like this, as the todos array and rendering logic can get complex with more features.