Skip to content

kartik-raj7/Todo-List

Repository files navigation

📋 Todo List Chrome Extension

dashboard

Language UI Library

📄 Project Description

A simple and intuitive ToDoList Chrome extension that helps you stay organized and manage your tasks effectively. This extension provides a range of features to enhance your productivity and keep track of your daily tasks.

🛠 Features

  • Live Clock: Display a real-time clock on the extension popup, allowing you to easily track the current time.

  • Daily Motivational Quotes: Fetches a new motivational quote every day from an API and displays it in the extension popup, providing you with daily inspiration.

  • Add Task: Enter and add new tasks to your ToDoList directly through the extension popup. The added tasks are instantly saved and persist across sessions.

  • Edit Task: Modify existing tasks on your ToDoList by clicking the edit icon. A prompt dialog allows you to enter the updated task, which is then reflected in the list.

  • Delete All Tasks: Clear your entire ToDoList in one click using the "Delete All" button. This action permanently removes all tasks from the list.

  • Mark Task as Completed: Check off completed tasks by clicking the checkbox beside each task. Completed tasks are visually distinguished, making it easy to track your progress.

  • Drag and Drop Sorting: Rearrange tasks according to your priority just by dragging and dropping them within the list. The updated order is automatically saved and maintained.

  • Download ToDoList as CSV: Export your entire ToDoList as a CSV file with a single click. The downloaded file contains a column for the task number and the corresponding task description.

🔧 Installation

To install the ToDoList Chrome extension, follow these steps:

  1. Clone the repository or download the source code.
  2. Open Google Chrome and go to chrome://extensions.
  3. Enable Developer mode.
  4. Click on "Load unpacked" and select the root folder of the extension.
  5. The ToDoList extension will be installed and visible in the extensions toolbar.

💻 Technologies Used

  • HTML
  • CSS
  • JavaScript
  • Chrome Extension API

📋 Usage

  • Click on the TodoList extension icon in the Chrome toolbar to open the popup.
  • Add new tasks using the input field and "Add Task" button.
  • Edit tasks by clicking the edit icon next to each task and entering the updated task description.
  • Delete tasks individually by clicking the delete icon or clear the entire list using the "Delete All" button.
  • Mark tasks as completed by checking the checkbox beside each task.
  • Drag and drop tasks to rearrange their order within the list.
  • Download your ToDoList as a CSV file by clicking the "Download" button.