TodoApp Documentation

Introduction

TodoApp is a feature-rich and responsive task management web application developed by AryCodes. It allows users to efficiently manage their daily tasks with functionalities such as adding, editing, deleting, filtering, and tracking progress. The app supports light and dark themes, ensuring a comfortable user experience across different environments. Tasks are stored in the browser's local storage, allowing users to retain their lists between sessions.

Features

Core Functionalities

• Add New Tasks: Users can add tasks by typing in an input field and clicking the "Add Task" button or pressing the Enter key.
• Edit Tasks: Existing tasks can be modified using an edit button that prompts users for new text.
• Delete Tasks: Tasks can be removed permanently using a delete button.
• Mark as Completed: Toggle the completion status of tasks using a checkbox.
• Filter Tasks: Users can filter tasks to view All, Active, or Completed tasks.
• Progress Tracking: A dynamic progress bar visually represents the percentage of completed tasks.
• Theme Toggle: Switch between light and dark modes for better accessibility.
• Local Storage: The app saves tasks and theme preferences, so they persist across sessions.
• Responsive Design: The layout adjusts for desktop, tablet, and mobile devices.
• Keyboard Shortcuts:
  • Press Enter to add a new task.
  • Use Tab + Enter to quickly mark a task as complete.
  • Use Shift + Delete to remove a selected task.

User Interface & Styling

Theme Support

The app includes light and dark themes controlled by CSS variables.

Light Theme

--bg-primary: #ecf0f1;
--bg-secondary: #ffffff;
--text-primary: #34495e;
--text-secondary: #7f8c8d;
--border: #bdc3c7;
--input-bg: #ffffff;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

Dark Theme

--bg-primary: #2c3e50;
--bg-secondary: #34495e;
--text-primary: #ecf0f1;
--text-secondary: #95a5a6;
--border: #34495e;
--input-bg: #34495e;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);

UI Components

• Header: Displays the TodoApp title and a theme toggle button.
• Task Input Section: Contains a text input field and an Add Task button.
• Filter Controls: Buttons to view all, active, or completed tasks.
• Task List: Dynamically updates with task items and their actions.
• Progress Bar: Visually represents task completion percentage.

Functionality & Code Structure

JavaScript Class: TodoApp

The app's logic is built with vanilla JavaScript using an object-oriented approach.

Constructor

• Initializes tasks from localStorage.
• Sets the default filter view (all).
• Applies the stored theme preference.

Methods

• init() - Initializes event listeners for buttons, theme toggle, and input.
• toggleTheme() - Switches between light and dark mode.
• addTodo(text) - Adds a task object with a unique ID, text, and date.
• deleteTodo(id) - Removes a task by its unique ID.
• toggleTodo(id) - Toggles the completion status of a task.
• editTodo(id, newText) - Updates a task’s text.
• saveTodos() - Saves tasks and theme preferences in local storage.
• updateProgress() - Updates the progress bar.
• renderTodos() - Renders tasks based on the selected filter.

Event Listeners

• click events for adding, deleting, editing, and toggling tasks.
• keypress event on the input field for Enter key submission.
• change event for theme toggle.

Storage & Data Handling

Local Storage Keys

• todos - Stores the task list as a JSON array.
• theme - Stores the current theme (light or dark).

Example Local Storage Structure

[
  {
    "id": "task-1",
    "text": "Complete project documentation",
    "completed": false,
    "created_at": "2025-02-19T10:30:00Z"
  }
]

Setup & Deployment

How to Use

1. Clone or Download the Project

   git clone https://github.com/arycodes/todoapp.git
   cd todoapp

2. Run Locally
   • Open index.html in a browser.
3. Customize Styles
   • Modify styles.css to update the design.
4. Host Online
   • Deploy on GitHub Pages, Vercel, or Netlify.

Compatibility & Requirements

Browser Compatibility

✅ Chrome
✅ Firefox
✅ Edge
✅ Safari
✅ Opera

System Requirements

• Device: Works on mobile, tablets, and desktops.
• JavaScript: Must be enabled in the browser.

Notes

• Minimum Age Requirement: Users under 13 should have parental guidance.
• Data Persistence: Tasks are stored locally and may be lost if browser storage is cleared.
• Security: No authentication is implemented; it’s a local-only app.

Roadmap & Future Enhancements

🚀 Upcoming Features:

• ✅ Drag & Drop task reordering.
• ✅ Voice input for adding tasks.
• ✅ Notifications/reminders.
• ✅ Export & import tasks as JSON or CSV.
• ✅ Cloud sync across devices.

Contact & Support

For issues, feature requests, or contributions, contact AryCodes:

🐙 GitHub: github.com/arycodes
📧 Email: arycodes.in@gmail.com
📱 Instagram: @arycodes

---

📌 Last Updated: February 19, 2025