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

Todo-app- HTMl-CSS-Javascirpt

Mahmood 1,070

@MahmoodHashem

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


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(), and localStorage.removeItem() methods was crucial for ensuring the todo list maintained its state between user sessions.
  1. 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, and dragend.
    • This enabled users to easily reorganize the todo items by simply clicking, dragging, and dropping them into their desired order.
  2. 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.
  3. 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.

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

Any feedback is appreciated

Community feedback

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