choiboi / html5-todos-application

Creating a BlackBerry application using HTML5 and BlackBerry WebWorks SDK.

INTRODUCTION

This repository contains all the source code required to create an BlackBerry WebWorks application for BlackBerry PlayBook.

What is it?

This is a productivity, TODO list, application for BlackBerry PlayBook using web technologies, mainly HTLM5, JavaScript, and CSS.

This application can be download at here.

Features

• Create a new TODO with a title and description.
• Edit each TODOs
• Mark each TODOs completed
• Delete any TODOs

Tools

• JQuery Mobile Framework
• JQuery
• Hycus Textare jQuery Plugin
• BlackBerry WebWorks

Collaborators

• James Choi
• Adrian Lee

html5-todos-application's Issues

Virtual Keyboard

Whenever the virtual keyboard appears, the bottom navigation bar is hidden. Hence, in order to use the bottom navigation bar , the user must drop down the virtual keyboard.

TODO List HTML Layout

Make the header and the footer navbar static, while the div element containing the TODO list scrolls only within that div.

This will hopefully remove the problem where the whole page overflows when scroll through the TODO list.

Loading Screen

Adding a loading when you start the application.
Currently it displays a blank white screen.

TODO Deadline

Give the user the ability add a date where their TODO must be completed by.

Required implementation for this feature:

• Text field in add note and edit note pages where the user can input a date
• Some form of label in the list TODOs displaying the inputed date
• Some form of notification system if activated

Newline in List of TODOs

Whenever the user inputs a newline in their notes, it does appear that way in the list of TODOs.
It will just show up in a single line with white-spaces as newlines.

About Page

Complete about page.
Information will include:

• Information about the application
• List of various source codes used in this application
• Information about the collaborators
• Add application version number

Change Log

Incorporate a text file which documents feature implementations or bug fixes into each released versions.

Edit TODO Note

Give the user the ability to edit their TODO title and their TODOs.

TODO Priorities

Ability for the users to select the priority level of each of the TODOs.

Three levels of Priority:

• High (red)
• Medium (yellow)
• Low (green)

If a TODO is marked completed then the priority symbol/information will either be removed or faded out.

Overall Lag in the Application

Lag is noticeable in:

• Scrolling TODO lists
• Switching pages
• Formatting of textfields
• Formatting of screen layout when orientation change has occurred

TODO Status Improvements

Our current implementation is a coloured text based status information.

Improvements that can be made:

• Show graphical images of the status as well as text information
• Add additional TODO status options

Empty Text Fields

Prevent the user from creating a TODO with empty title and note textfields.
Same goes for editing existing TODOs, prevent it from saving TODOs with empty title and note textfields.

Textarea Expanding when Typing

Whenever you type in the textarea in edit note page and new note page, the textarea expands when you type in current line.

Textfield Auto Adjust Size

Currently the textfield automatically expands the textfield if the as the user inputs text, but when the user deletes text from an expanded textfield it does not decrease in size.

Code and File Clean-up

This issue involves the following:

• Remove any unnecessary code
• Remove any redundant codes, hence reducing file size
• Re-organize the repo file structure
• Remove any unnecessary files from repo

Theme/Looks of the Application

Using JQuery Mobile Theming Framework, implement a theme for this application.

Grammar Issues

Change "uncomplete" to "incomplete".

Theme Options

Give users the ability to select a theme from a given set of themes.

Note Stored in a Remote Database

Sent TODO notes to a remote server. For example http://simplenoteapp.com/ or dropbox.

Advantage of this feature:

• Ability to backup all your TODO notes
• Ability to access TODO notes anywhere you are connected to the internet.

Application Icon

Create an application icon with the specifications:

• 86x86px [77x77px]
• 72ppi
• RGB
• PNG

View Note Page

Our current set-up:
When we select a TODO from the list, we directly switch over to edit note page.

Proposed set-up:
Instead of switching directly over to edit note page, switch over to the page where it displays:

• Title
• TODOs
• TODO status and date of creation
• Buttons for marking completed/uncompleted, edit TODO, delete note and return to list
  While the edit page will have the current text field setup but only with save change button and cancel button.

Undo Deleted TODO Button

Once the user deletes a note and once it returns back to the list of TODOs, display a button or bar of some sort where the user can restore the previously deleted TODO.

Textfield Format Issue

On both edit note and add note pages, the text fields far extends outside the right side of the playbook screen.

Store Notes

Using HTML5 localstorage, store the notes that the user creates.
Each note will contain:

• TODO title
• TODO notes
• Date created
• Is the note completed

Also, implement a feature where the user can delete a TODO.

Closing the Application

Using BlackBerry WebWorks API, close the application when the user presses on the exit button.

Marking a Task Completed

Implement a feature where the user can mark and unmark completion of a TODO.
Show the status(completed or ongoing) beside the TODO in the list of TODOs.

Cannot Access Links in About

All the links in the about page cannot be access as those link have not been whitelisted.

Browser Background When Changing Orientation

When changing from landscape to portrait and vice versa, the browser does not render the page properly and a big patch of white space appears between the end of the TODO list and the bottom navbar.

Delete Multiple TODOs

Place an option somewhere on the TODOs list screen and add an option where the use can select multiple TODOs to be deleted.

Background

Using one of the backgrounds from http://subtlepatterns.com/ incorporate it into the application.

Textfield Expanding Issue

When the textfield expands to the point where it exceeds the containing div element, it stay at that size throughout.

Steps to reproducing:

1. Edit a note that will require a textfield that exceeds the height of the div element.
2. Press "Cancel Changes" button.
3. Select a note that will not require a textfield that exceeds the height of the div element.

Compress Hypcus JS file

Currently hycus-textarea.js is not compressed, compressing this file will reduce the file size and hence reduce the application size.

Long Title Format

If the user inputs a very long title for their note, the text will overlap the date text making it difficult to read the title and the date.

Accounts

A feature where users can create an simple account stored using HTML5's localStorage, which each account contains TODOs created by the owner of the user account.

Proposed implementation on Accounts:

• Either create a account with or without a password, but a username is must.
• No account information will be sent over the air to servers, account information will be stored on the browser's storage system.
• Ability to transfer TODOs between accounts
• Once this feature has been implemented and the application is updated, give the user to transfer existing TODOs to a particular account, otherwise permanently delete the TODOs
• Each account will need to be provided with name, username, and/or password
• Ability to edit account information