To-Do List

A clean, single-page To-Do app built with vanilla HTML, CSS, and JavaScript for a bootcamp project.
It focuses on DOM manipulation, strong UX design, accessibility, and a tidy, testable code structure.

Live Demo: https://dazdingo11.github.io/ToDoList/

---

Quick Start

1. Download or clone this repository.
2. Open index.html in your browser (or use VS Code’s Live Server).
3. Your tasks are saved automatically in your browser through localStorage — no backend required.

---

Features

• Add tasks with Title (required) and Description (optional)
• Validation
  • Title is required and must be unique (case-insensitive)
  • Due date must be today or later
• Priority levels: Low → Normal → High
• Sorting options
  • Created
  • A → Z (by title)
  • Due date
  • Priority (Low → Normal → High)
• Filtering: All, Active, Completed
• Search: strict prefix match on the task title
• Edit tasks: change Title, Description, Priority, or Due date (with confirmation)
• Delete tasks with confirmation
• Clear completed tasks with confirmation
• Undo / Redo (depth 3)
  • Works for Delete, Clear Completed, and Edit
• Drag-and-drop reordering
  • Works when Filter=All, Search is empty, Sort=Created
  • Keeps consistent Created order
• Responsive design
  • Fully optimized for mobile, tablet, and desktop
• Accessibility
  • Screen-reader support
  • Keyboard navigation (Enter / Esc)
  • Proper ARIA labeling
• Performance
  • Batched writes to localStorage
  • Fast DOM updates via DocumentFragment

---

How It Works

Files

• index.html — Structure: form, task list, modal, undo/redo bar
• style.css — Theme variables, layout, buttons, modal, responsiveness
• app.js — Application logic:
  • State: in-memory tasks array
  • Persistence: localStorage
  • Rendering: full re-render on state changes
  • Validation: title uniqueness, date restrictions
  • Sorting / Filtering / Search: in filteredTasks()
  • Editing: inline via enterEditMode()
  • Confirm modals: custom overlay (Escape, Enter, or outside click to close)
  • Undo/Redo: action inversion system
  • Drag-and-drop: reorders tasks while keeping sort order consistent

---

Keyboard Shortcuts and Interaction

• Confirm modal: Enter = confirm, Esc = cancel, click outside = cancel
• Edit mode: Ctrl/Cmd + Enter = Save
• Drag-and-drop: Only active when Filter=All, Sort=Created
• Undo/Redo: Available for Delete, Clear Completed, and Edit

---

Browser Support

• Chrome, Firefox, Edge, and Safari
• Uses -webkit-line-clamp with standard line-clamp fallback for description trimming

---

Potential Future Improvements

• Inline SVG favicon
• Always-on manual sort mode
• Export/Import tasks as JSON
• Overdue task highlighting in header

---

License

MIT License
Copyright (c) 2025 Dazdingo11

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the software or the use or other dealings in the software.

---

Author: @Dazdingo11
Live Demo: https://dazdingo11.github.io/ToDoList/