To-do-list

Full stack development

A simple, responsive, and accessible to-do list application built with vanilla HTML, CSS, and JavaScript. This app focuses on a clean user interface and uses the browser's localStorage to persistently store your tasks.

This project was built from scratch to demonstrate core front-end web development skills, including DOM manipulation, event handling, and modern CSS styling.

🚀 Live Demo

https://dasouvik122005.github.io/To-do-list/

✨ Features

• Add & Manage Tasks: Quickly add new tasks, mark them as complete, or delete them individually.
• Dark Mode: A sleek dark theme toggle that remembers your preference.
• Task Priorities: Assign Low, Medium, or High priority to tasks with visual badges.
• Smart Filtering: Easily switch between viewing All, Active, or Completed tasks.
• Inline Editing: Double-click the task text to instantly edit it without leaving the list.
• Persistent Storage: Tasks are saved in your browser's localStorage, so they remain even after you close the tab or refresh the page.
• Task Counters: Get a live-updated count of your total tasks and how many you've completed.
• Bulk Actions:
  • Clear Completed: A button to remove all tasks that have been marked as done.
  • Clear All: A (confirmed) action to delete every task from the list.
• Timestamps: Each task automatically records and displays the date and time it was created.
• Responsive Design: The layout is fully responsive and works seamlessly on both desktop and mobile devices.
• Accessible: Built with semantic HTML and ARIA attributes (like role="application" and aria-label) for better screen reader support.
• Secure: User input is sanitized by escaping HTML characters to prevent Cross-Site Scripting (XSS) vulnerabilities.

🛠️ Tech Stack

• HTML5: Structured with semantic elements for clarity and accessibility.
• CSS3: Styled with modern CSS, including custom properties (variables), Flexbox, and media queries for responsiveness.
• JavaScript (ES6+): All logic is handled with "vanilla" JavaScript, with no external frameworks or libraries.
  • DOM Manipulation
  • Event Listeners
  • localStorage

🏃 How to Run Locally

No special build steps are required.

1. Clone the repository:

   git clone [https://github.com/your-username/your-repo-name.git](https://github.com/your-username/your-repo-name.git)

2. Navigate to the project directory:

   cd your-repo-name

3. Open the index.html file:
   • Simply double-click the index.html file in your file explorer, or right-click and "Open with" your preferred web browser.