Skip to content

To do list with Java Script by using HTML, CSS, and Java Script with using Local storage, drag & Drop.

Notifications You must be signed in to change notification settings

AhmedKhalafallah1999/To-Do-List

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

To-Do-List

To do list with Java Script by using HTML, CSS, and Java Script with using Local storage, drag & Drop.

Kanban Board Project

This project is a Kanban Board built using HTML, CSS, and Vanilla JavaScript. It was created as part of the Kalbonyan elmarsos competition.

Demo

You can view a live demo of the project at Kanban Board.

Untitled.Project.mp4

Technologies Used

  • HTML5
  • CSS:
    • Flexbox
    • Grid
  • JavaScript:
    • Drag and Drop API
    • Local Storage API

Features and Usage

  • ✅ You can create new tasks
  • ✅ Edit existing tasks
  • ✅ Drag and drop tasks to other positions
  • ✅ Reload the page without losing your tasks and data
  • ✅ Responsive design for all screen sizes

Issues and Solutions

  • The createTask function generates a random ID for each task, which can cause issues when trying to remove or edit tasks that have been saved to the Local Storage API. To solve this issue, modify the createTask function to accept the ID stored in the Local Storage API as a parameter.
  • Use higher order functions like filter and find to update the arrays in the Local Storage API when dragging tasks to new positions or performing other operations.

Future Plans

  • Refactor the code to be more readable and maintainable 🔁.
  • Build the project using React JS ⚛ for improved performance and scalability.

Resources

About

To do list with Java Script by using HTML, CSS, and Java Script with using Local storage, drag & Drop.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published