myTodoList

Live Demo

Task Management Application

myTodoList is a task management application that draws inspiration from TickTick's innovative side panel design, which is used to display task information.

Features

• Add and delete tasks
• Mark tasks as completed
• Create and manage projects
• Load default projects (Inbox, Today, Tomorrow) as well as user projects
• Save projects to local storage

Bugs to Fix

• Tasks disappearing for a second when a checkmark is clicked

Features to Add

• Implement date filtering (Today, Tomorrow, Inbox)
• Ask for confirmation to delete project
• Load info placeholder on project deletion

Resources Used

• IconPark (Icons)

What I Learned

• Local storage management for saving and loading projects and tasks using the Web Storage API
• Event handling for adding and deleting tasks and projects
• Object-oriented programming for task management
• Importing and exporting JavaScript modules using ES6 syntax
• Dynamic rendering of tasks and projects in the UI

Code

The code for this project is written in HTML, CSS, and JavaScript. It uses the Webpack build tool and the Lodash library.

Future Improvements

• Implement drag and drop functionality for tasks
• Improve the design and user experience of the application

Build and Use the myTodoList Application

Prerequisites

• Ensure you have Node.js and npm installed on your machine.

Installation Steps

1. Clone the Repository
   Clone the repository to your local machine using the following command:

   git clone https://github.com/melovii/myTodoList.git

2. Install Dependencies
   Run the following command in the terminal:

   npm install

3. Start the Development Server Use this command to start the server:

   npm start

4. Access the Application Open your web browser and go to:
   http://localhost:8080