Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devtony101/js-todo-app-indexed_db
This is a to-do web application that uses the IndexedDB API.
https://github.com/devtony101/js-todo-app-indexed_db
hacktoberfest hacktoberfest2020 indexeddb javascript tutorial
Last synced: about 2 months ago
JSON representation
This is a to-do web application that uses the IndexedDB API.
- Host: GitHub
- URL: https://github.com/devtony101/js-todo-app-indexed_db
- Owner: DevTony101
- License: mit
- Created: 2020-07-19T20:25:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T06:45:22.000Z (almost 2 years ago)
- Last Synced: 2024-04-20T13:06:06.762Z (9 months ago)
- Topics: hacktoberfest, hacktoberfest2020, indexeddb, javascript, tutorial
- Language: JavaScript
- Homepage: https://indexed-todo-app.netlify.app
- Size: 900 KB
- Stars: 10
- Watchers: 3
- Forks: 13
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# TO-DO IndexedDB Web App
[](https://github.com/DevTony101/js-todo-app-indexed_db/blob/master/LICENSE)
[](https://app.netlify.com/sites/indexed-todo-app/deploys)
This a sample project, product of a series of tutorials made by myself on **DEV**. The aim is to teach/learn the basics of the IndexedDB API, specifically:
- Learn about the concepts of transactions, requests, object stores
- Learn how to perform **CRUD** operations in the IndexedDB instance
You can read the blog [here](https://dev.to/devtony101/javascript-building-a-to-do-app-with-the-indexeddb-api-part-1-4382).
## Features
- **Create a task**: You can create a brand new task with a given title, description and deadline date. Later that task is saved using JavaScript IndexedDB API.
- **Show saved tasks**: Everytime the page loads it will query the indexed database to get all saved tasks and display them as panels at the bottom of the page.
- **Edit a task**: You can edit any given task at any given moment.
- **Toggle the "done" status of a task**: You can toggle whether a task is "done" via either a checkbox or while editing the task.
## Want to code along?
Here are the starting and finished code templates for each part of the tutorial series.
| Part | | |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| First Part (Creating the `persist` function) | [Starting Code](https://github.com/DevTony101/js-todo-app-indexed_db/releases/tag/starter-code-part-one) | [Finished Code](https://github.com/DevTony101/js-todo-app-indexed_db/releases/tag/finished-code-part-one) |
| Second Part (Creating the `getOpenCursor` function) | [Starting Code](https://github.com/DevTony101/js-todo-app-indexed_db/releases/tag/starting-code-part-two) | [Finished Code](https://github.com/DevTony101/js-todo-app-indexed_db/releases/tag/finished-code-part-two) |
| Third Part (Creating the `delete` function) | [Starting Code](https://github.com/DevTony101/js-todo-app-indexed_db/releases/tag/starting-code-part-three) | [Finished Code](https://github.com/DevTony101/js-todo-app-indexed_db/releases/tag/finished-code-part-three) |
Once you download the code, execute the following commands.
To install all the dependencies:
```
npm install
```
To start the local development server:
```
npm run start
```
## How to contribute?
Please refer to the [contributing guide](https://github.com/DevTony101/js-todo-app-indexed_db/blob/master/CONTRIBUTING.md).