Odin To-Do List Application

A simple and elegant To-Do List application built as part of The Odin Project curriculum. This project allows users to create multiple projects, manage tasks, set priorities, and track due dates.

Features

• Create and Manage Projects: Users can create multiple projects, each with its own list of tasks.
• Task Management: Add, edit, and remove tasks with attributes such as title, description, due date, and priority.
• Dynamic UI: Responsive interface that displays tasks by project, with different colors for priorities.
• Modular Design: Classes and functions are separated into different modules, keeping the code clean and maintainable.

Project Demo

You can view the live version of the project here.

Technologies Used

• JavaScript (ES6)
• HTML/CSS
• Webpack (for bundling modules)
• GitHub Pages (for deployment)

How to Run Locally

1. Clone the repository.
2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

What I Learned

Building from Scratch, No Frameworks

While a to-do list application is often seen as a basic and cliché project, this experience was invaluable because I built it without using any frameworks. By relying solely on vanilla JavaScript, HTML, and CSS, I gained a deeper understanding of:

• DOM Manipulation: Handling user interactions and updating the UI manually without the convenience of frameworks helped me learn what goes on under the hood of a framework.
• Project Structure: Organizing code into classes and modules, ensuring maintainability and scalability.
• Advanced css concepts: By building the UI from scratch without using any templates or frameworks, I learned advanced CSS concepts like Flexbox and Grid, which helped me create a responsive and well-structured layout for the application.:

SOLID Principles

• Single Responsibility Principle: Each class and module has a single responsibility, making the code easier to manage and extend.
• Event-Driven Programming: Working with JavaScript's event system to create a dynamic, interactive user experience.
• Open/Closed Principle: The code is open for extension but closed for modification, allowing new features to be added without altering existing functionality.

Object-Oriented Programming in JavaScript

• Classes and Modules: I learned how to create and manage multiple classes in separate modules, improving code organization.
• Constructors: Utilized constructors to initialize objects and understand how they work in JavaScript to create reusable task instances.

Separation of Concerns

• UI vs. Logic: I split the application logic (task management, project handling) from the user interface, adhering to best practices in code separation. This makes the code more scalable and easier to maintain.

Future Improvements

• Add local storage support to persist data between sessions.
• Implement user authentication to manage personal To-Do lists.
• Enhance the UI with more animations and better design.