Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Browser Local Storage Manipulation:
- One of the core things I learned was how to effectively use the browser's local storage to persist user data.
- This allowed me to store task-related information, such as the todo items and their completion statuses, even after the page was refreshed or the browser was closed.
- Mastering the
localStorage.setItem()
,localStorage.getItem()
, andlocalStorage.removeItem()
methods was crucial for ensuring the todo list maintained its state between user sessions.
-
Drag-and-Drop Functionality:
- Another key learning experience was implementing a drag-and-drop mechanism for reordering the todo list items.
- I explored techniques to detect and handle the various drag and drop events, such as
dragstart
,dragover
,drop
, anddragend
. - This enabled users to easily reorganize the todo items by simply clicking, dragging, and dropping them into their desired order.
-
DOM Manipulation and Event Handling:
- A significant part of the challenge involved learning how to effectively manipulate the DOM (Document Object Model) and handle various JavaScript events.
- For example, I learned how to efficiently target and update specific elements within a container, based on their state (e.g., completed or incomplete tasks).
- This involved techniques like querying the DOM, attaching event listeners, and dynamically updating the UI to reflect the changes.
-
Filtering and Searching Functionality:
- Another important aspect I mastered was the ability to filter and search the todo list items based on their completion status.
- I learned how to implement features that allowed users to view all tasks, only completed tasks, or only incomplete tasks.
- This required understanding how to effectively process and display the todo list data based on the user's selected filter criteria.
Any feedback is appreciated
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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