In-Browser TODO app with Javascript and jQuery
Intention is to create a simple-to-use TODO app that
- Can run on browser wihtout the need of internet connection
- Has zero or least set up
- Has no module installation, least dependency
- Needs no server or backend
- Can still be able to persist data (in browser) using WebSQL
So, the 'stack' is merely Javascript.
Overall app looks like this:
This is devided mainly into 3 sections:
- Left : Information section
- Center: Add new task and listing of tasks
- Right: Action buttons
Adding a new task is as easy as typing into the text field and pressing Enter key
Tasks as properly highlighted by priorities ( High, Medium and Low):
Tasks can be selected individually and be acted upon:
Action buttons are placed on the right section for this purpose:
- Javascript, jQuery (3.1.1)
- Custom Components with Shadow DOM (No Polymer etc.)
- WebSQL for data persistence in-browser
App is tested only on Google Chrome (Custom components did not seem to work on Edge)
If you want to contribute (you are most welcome), project is divided into below sections:
- index.html (basic barebones of the page)
- js folder
- app.js ( magic happens here - divided into 3 namespaces viz. model, view, controller
- database.js ( WebSQL related code resides here - almost all methods return a Promise so app.js can rely on them (pun intended ;-) ))
- todo-item.js ( custom element to display a task - styles for the tasks are here)
- css
- styles.css (all remaining styles are here)
So far, no Bootstrap or other UI frameworks to keep the project lightweight and simple