Mygist

• 

  Demonstrating completed option, with completion percentage

• 

  Demonstrating active option, with completion percentage

• 

  Demonstrating All option, with completion percentage

• 

  Demonstrating rearranging using dragging feature option, with completion percentage

Inspiration

Lets you add, edit, delete, and reorder tasks Saves data in localStorage (stays even after refresh) Shows a circular progress bar for completion tracking Filters tasks by All, Active, or Completed Adds smooth animations and sound effects for interaction

What it does

Lets you add, edit, delete, and reorder tasks Saves data in localStorage (stays even after refresh) Shows a circular progress bar for completion tracking Filters tasks by All, Active, or Completed Adds smooth animations and sound effects for interaction

How I built it

Languages: HTML, JavaScript Styling: Tailwind CSS Animations: CSS transitions and JavaScript class toggles Storage: Browser localStorage Sound: Web Audio API Task Editing: contentEditable Drag-and-Drop: Native HTML5 Drag & Drop API

Challenges I ran into

Implementing drag-and-drop reordering without external libraries Keeping animations smooth while updating the DOM dynamically Making the interface responsive and accessible

Accomplishments that I'm proud of

Fully functional to-do app with no dependencies or backend Clean, Trello-inspired UI that works across all devices Integrated progress visualization and drag-reordering from scratch

What I learned

How to implement drag-and-drop with precise position detection Managing animations and transitions using class manipulation Improving UX using subtle sound and visual feedback

What's next for Mygist

Real-time sync using Firebase or WebSockets Multi-user collaboration features Due dates, reminders, and recurring tasks PWA support to install as a mobile app Light/dark mode toggle

Built With

• css3
• html5
• javascript
• localstorage
• tailwind
• webaudioapi