PROJECT INFORMATION

Description

A simple drag and drop to do list. My goal with this project was to dive deeper into getting and storing data to local storage. Learn how to capture multiple inputs and put them into an array then save, get, edit then update the array in local storage. As well as learning how to allow users to filter, edit, complete, and delete items. As well as learn more about touch events.

Project Status

Currently working on this project.

Javascript

• Local Storage
• Currently working on getting textarea inner text from local storage.
• Add category selection to new task array, save and get task with the corresponding category.
• Task category to change when it is dragged and dropped into a new category, changes are updated and stored in local storage.

Issues I'm having with local storage.

Items are being saved to local storage and all content and text will display until page reload, then everything is displayed, but textarea inner text, which is still stored in local storage.

Other Functions to Finish or Add

• Fix To Do task list, it's currently not letting tasks drag and drop inside itself. Tasks will drag and drop into other categories.
• Task Filter.
• Task complete checkbox.
• Edit button.
• Delete button.
• Delete all tasks button.
• Touch events.

CSS

• I will be updating the design a little after finishing the JavaScript.
• Fix textarea and task item, needs to get larger to fit text instead of scroll.
• Layout of task lists and tasks on mobile and tablet.
• Size of task lists and tasks, ensure user friendly for mobile and tablet.
• Fix line through textarea inner text and turn text grey upon task completion.

HTML

• Delete all tasks button.

Technologies

• CSS
• HTML
• JavaScript

Issues and Future Changes

Issues

As mentioned above the current issue I am working on is; Items are being saved to local storage and all content and text will display until page reload, then everything is displayed, but textarea inner text, which is still stored in local storage.

Features

• Add and delete your own list categories.
• Change background color.
• Add a background image.
• Change task list and task item color.
• Dark mode.

Project Repository

Review drag and drop to to list GitHub repository.