To-Do List App- using jQuery
jQuery To-Do List (Mini Project)
Built a lightweight To-Do List web app to practice using jQuery for DOM selection, traversal, manipulation, events, and Ajax patterns—contrasting jQuery techniques with vanilla JavaScript for performance and maintainability insights.
Tech Stack:
Frontend: HTML5, CSS3, JavaScript (ES6), jQuery
Practices & Tools: Accessibility-minded UI, cross-browser support (incl. IE11), ESLint/clean code, Git/GitHub
Deployment: GitHub Pages (static hosting)
User Stories:
As a user, I can add items to my list to track tasks.
As a user, I can mark items as done to see progress at a glance.
As a user, I can reorder items to reprioritize tasks.
As a user, I can delete items I no longer need.
Key Features:
DOM manipulation with jQuery: create/append elements, toggle classes (e.g., strike-through), show/hide with fade/slide animations.
Event handling: click-to-complete, delete, and drag/reorder interactions (with simple jQuery patterns).
Input handling: capture values with
.val(), attribute reads/writes via.attr().Progressive enhancement: graceful behavior in older browsers; clean, responsive UI.
(Optional) Ajax hook: demonstrated
$.ajax()usage pattern and error handling for future data persistence.
What I Practiced & Learned:
Compared vanilla JS vs. jQuery approaches (selector collections, chaining, and performance trade-offs).
Employed chaining for concise UI effects (e.g.,
.addClass().delay().removeClass()).Applied collections vs. elements correctly (e.g.,
.get(0)when needed).Considered file size & performance (when to use a library vs. native APIs).
Wrote clean, accessible markup and ensured cross-browser compatibility.