✅ Priority-Based To-Do List Web App

A simple yet powerful web application designed to help users effectively manage their daily tasks by allowing them to create, prioritize, sort, and track the completion status of their to-do items. It features a clean, responsive user interface to enhance productivity and organization.

Features

• Add Tasks: Easily add new tasks with a clear description, assign a priority level, and optionally set a due date.
• Assign Priority Levels: Categorize tasks as High, Medium, or Low importance to help focus on critical items.
• Set Due Dates: Attach specific deadlines to tasks, aiding in time management and timely completion.
• Mark as Complete/Incomplete: Toggle the status of tasks, visually indicating progress and filtering completed items.
• Dynamic Sorting: Organize your task list instantly based on either priority (high to low, or low to high) or due date (earliest to latest, or latest to earliest).
• Priority Filtering: View tasks filtered by a specific priority level (High, Medium, Low) or show all tasks.
• Clear Completed Tasks: Conveniently remove all tasks marked as completed from the list.
• Theming Options: Customize the application's appearance with different color themes.
• Responsive Interface: Enjoy a clean and user-friendly experience across various devices due to responsive CSS styling.

Technologies Used

• Python: The core programming language for the backend logic.
• Flask: A lightweight Python micro-framework used to build the RESTful API for task management.
• MySQL: A relational database management system used for persistent storage of to-do items.
• HTML: Provides the structure and content of the web pages.
• CSS: Styles the user interface, ensuring a modern and responsive design.
• JavaScript: Powers the dynamic interactions on the frontend, handles API calls, and manages UI updates.
• mysql-connector-python: Python library for connecting Flask to MySQL.
• Flask-CORS: Flask extension to handle Cross-Origin Resource Sharing, enabling seamless communication between the frontend and backend when they are served on different ports.

Setup Instructions

To get the Priority-Based To-Do List Web App up and running on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/AasthathecoderX/Todo_list_webApp
   cd Todo_list_webApp

2. Install Python Dependencies: Make sure you have Python and pip (Python package installer) installed. Then, install the required libraries for Flask and MySQL connectivity:

   pip install flask
   pip install flask-cors
   pip install mysql-connector-python

3. Database Setup:

   • Ensure you have a MySQL server installed and running on your system (typically 127.0.0.1).
   • Log in to your MySQL server (e.g., using MySQL Workbench or the command line).
   • Create a new database for your to-do list application. For example:

     CREATE DATABASE to_do;

   • Create the todos table within this database. The schema is provided below in the "Database Schema" section.
   • Update Database Configuration: Open app.py and modify the DB_CONFIG dictionary with your MySQL credentials:

     DB_CONFIG = {
         'host': '127.00.0.1',
         'user': 'your_mysql_username', 
         'password': 'your_mysql_password', 
         'database': 'to_do'
     }

4. Run the Backend Server (Flask): Open your terminal, navigate to the project's root directory (where app.py is located), and execute:

   python app.py

   This will start the Flask development server, usually on http://localhost:5000.

5. Run the Frontend Server (Python's http.server): Open a separate terminal window. Navigate to the directory containing your index.html file (e.g., the root of your project if index.html is there, or a frontend folder). Then run:

   python -m http.server 8080

   This will serve your static frontend files (HTML, CSS, JavaScript) on http://localhost:8080.

6. Access the Application: Open your web browser and navigate to http://localhost:8080/. You should see the to-do list application interface.

Database Schema

The application uses a single table named todos to store all the task information. Below is the SQL CREATE TABLE statement for its structure:

CREATE TABLE todos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    text VARCHAR(255) NOT NULL,
    completed BOOLEAN DEFAULT FALSE,
    priority VARCHAR(10) DEFAULT 'medium',
    due_date DATE
);# Priority-Based-Todo-Web-App