To-Do List with Local Storage




Key Features Explained

  • Local Persistence: Uses localStorage.setItem and JSON.parse so your tasks remain available even after you close the browser tab.

  • Dynamic Progress Bar: Calculates the percentage of completed tasks ($\frac{\text{Completed}}{\text{Total}} \times 100$) and updates the UI with a CSS transition.

  • Drag & Drop Reordering: Implements a manual sorting system where you can grab a task and move it. The script re-indexes the underlying tasks array upon drop to save the new order.

  • Categorization: Each task is tagged (Work, Personal, Urgent) with distinct styling, making it easier to scan long lists.

  • Responsive Layout: The input group switches to a vertical stack on mobile devices to ensure the buttons remain clickable.

<a target="_blank" href="https://www.google.com/search?ved=1t:260882&q=TaskFlow+-+Advanced+To-Do&bbid=927297178161218206&bpid=7067902714488957340" data-preview><a target="_blank" href="https://www.google.com/search?ved=1t:260882&q=TaskFlow+Advanced+To-Do+official+site&bbid=927297178161218206&bpid=7067902714488957340" data-preview>TaskFlow - Advanced To-Do</a></a>

TaskFlow

0% Completed