https://github.com/chrisnajman/sortable-todo-list

Sortable, drag-and-drop to do list, with edit, complete and delete functionality. Saves to local storage.
https://github.com/chrisnajman/sortable-todo-list

drag-and-drop html-css-javascript html-template localstorage

Last synced: 9 days ago
JSON representation

Sortable, drag-and-drop to do list, with edit, complete and delete functionality. Saves to local storage.

• Host: GitHub
• URL: https://github.com/chrisnajman/sortable-todo-list
• Owner: chrisnajman
• License: mit
• Created: 2022-12-20T14:29:30.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-08T10:35:27.000Z (about 2 years ago)
• Last Synced: 2024-11-21T00:52:26.463Z (2 months ago)
• Topics: drag-and-drop, html-css-javascript, html-template, localstorage
• Language: JavaScript
• Homepage: https://chrisnajman.github.io/sortable-todo-list/
• Size: 9.77 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
---

permalink: /index.html

---

[Website (Git Pages)](https://chrisnajman.github.io/sortable-todo-list)

# Sortable Todo List

This todo list is combined from two sources:

1. The 'Advanced Todo List' tutorial in the [Javascript Simplified](https://courses.webdevsimplified.com/view/courses/javascript-simplified-beginner) course, by Kyle Cook.

2. [SortableJs](https://github.com/SortableJS/Sortable)

My own contribution to the code is:

1. The 'Completed' button, and

2. the 'Edit' button.

The todos, including completed and edited states, are successfully stored and retrieved from local storage. Likewise with the sort order: change the order, refresh the browser, and the rearranged items stay in place.

However, a problem arises if you:

1. Create a list of todo items,

2. rearrange the order, then

3. complete and / or edit a todo, then

4. refresh the browser

After refreshing, the completed and / or edited items move to the top of the list.