Todo App
The illustrious portfolio Todo List. This app utilizes localStorage to save your todos and your light/dark mode preference. Design by Frontend Mentor.
Stack
- Vanilla JavaScript
- localStorage
Key features
- Drag and drop reordering
- Filter for all, active, or completed todos
- Toggle light and dark mode
Links
Project overview
This was the last project I built before learning React, and perhaps ironically, it's the one that would benefit most from the framework. The basic structure I created mirrors several React principles.
- There are two main pieces of state—the todos themselves and which status filter is selected
- Each time a todo is added, deleted, marked complete, or reordered, the todos array is updated, and the todo list is redrawn based on the filter state
- The content <template> element works like a reusable component and includes all of the syntax and styles needed to house a todo in the list
Helpful resources
- MDN's article on the content <template> element
- Web Dev Simplified's video on building sortable drag and drop in Vanilla JS
Challenges and lessons learned
One of the more challenging parts of this project was implementing drag and drop reordering—ensuring the new order is accurately captured in state, and the list is redrawn correctly on refresh (again, something React could have helped me with). Since this was my first time attempting drag and drop, I opted to build it from scratch. But now that I understand the underlying mechanics, I would likely take advantage of a library for future projects.
The most difficult snag I hit was trying to meet the design spec while still achieving accessibility standards. In some cases, I just had to change the design a bit (strictly speaking, the design asked me to remove any focus outline from the new todo text input). But in other cases, I learned some neat practices—like how to hide radio buttons and completely customize checkboxes, but still keep them focusable for keyboard users.
