Assessment 3: Create your first mobile-fit website Solution



Due: see the course outline for a specific date

In this assignment, you will practice creating a mobile web app using jQuery Mobile. You need materials from lessons 5, 6, and 7 to complete this assignment. Please check the instructions and requirements.


Use these instructions to execute the ‘Project plan’ Plan’ you created in Assignment 2. :

  1. Application Features: The web application has a simple feature set, and users should be able to do the following:

    1. Create notes.

    1. Edit notes.

    1. Delete notes.

    1. Store notes on the device that is running the application, across browser sessions.

    1. View the entire collection of notes.

How to plan this project:

    1. First, take care of the details for selecting page elements, adding new page elements, and updating the DOM.

    1. Second, use jQuery UI to build the web application interface.

    1. Third, use the following steps to use both libraries:

      1. The first thing you need in the app is an interface for users to create and edit notes. You can do this by employing a form. Use jQuery UI library to do so.

      1. You also need a view that renders a list of the existing notes. You can connect the Notes List with the Note Editor in such a way that the Notes List will correctly reflect note additions, edits, and deletions.

      1. Now you must define the features and design of the app, which brings us right into the realm of specifications and deployment.


I would highly recommend keeping your design—as much as possible—simple. Your design must, at a minimum, meet most of these requirements:

  1. The application should start with an empty list.

  1. A form should be used for note creation, so that the user will use it to enter a note.

  1. When a user adds or removes a note, the main page view should be updated. That means you need to store your notes in a list.

  1. When a user adds a new note, it should appear at the bottom of the list.

  1. Users should have the ability to add a note to the list (Make sure to update the list).

Page 1 of 3

  1. Users should have the ability to edit the note, and that must be accomplished using the same form that creates notes in the first place.

Please refer to the rubric at the end of this document for evaluation details.


  1. Name your folder assignment_3_project.

  2. Right-click on the folder and select ‘Send to -> Compressed (zipped) folder’.

  3. Upload the zipped folder to the Assignment 3 Dropbox

How to zip your project folder:

Here are some links that may help compress your main/root folder. Please send only that zip folder.

Page 2 of 3


This assessment is graded out of 25 points and will be evaluated using the following rubric.

Learners may receive partial scores or zero for unacceptable work.

Excellent: 5 points

Good: 3 points

Fair: 1 point

Poor: 0 points


Notes are added or

Notes are added or

Notes are added or

deleted with the

Notes are added or

deleted with the

default style, but

deleted with the

deleted without the

default style and their

their content is not

default style and their

default style, and their

content is updated

updated correctly.

Create notes

content is updated

content is not updated

correctly. However,

Furthermore, the


and Delete

correctly. The app

correctly. The app

the app layout is not

app layout is not


layout is organized,

layout is not organized,

organized—yet new

organized, and new

and new notes are

and new notes are not

notes are added

notes are not

added appropriately to

added appropriately to

appropriately to the

added appropriately

the end of the list.

the end of the list.

end of the list.

to the end of the


Notes edit in the form

Notes edit in the

Notes do not edit in the

Notes edit in the form

form, but form

and form function

form, but form function

and form function

function does not

permits data entry.

does not permit data

permits data entry.

permit data entry.


Edit notes

However, edited

entry. Furthermore,

Edited notes are

Furthermore, edited

notes are incorrectly

edited notes do not

correctly positioned in

notes do not

positioned in the

position correctly in the

the main view list.

position correctly in

main view list.

main view list.

the main view list.

Notes are organized,

Notes are

Notes are not

organized, but their

Notes are organized,

and their width fits

organized, nor does

width doesn’t fit the

and their width fits the

the page. Notes

their width fit the page.

page. Notes order

page. Notes order as

order as required.

Notes order as required.


App layout

as required.

required. The layout is

However, the layout

However, the layout is

However, the layout

organized and there

is not organized, and

not organized, and

is not organized,

are no overflow issues.

there are a few

there are a lot of

and there are some

overflow issues.

overflow issues.

overflow issues.

Links for navigation

Links for navigation

Links for navigation

Some links do not take



are clearly labelled

are clearly labelled,

take the reader to

the reader to the sites

and consistently

though perhaps not

their expected

or pages described. A

positioned. They allow

always consistently

destination, but

user often feels lost.

the reader to easily

positioned. They

some needed links

move from a page to

allow the reader to

seem to be

related pages, and

easily move from

missing. A user

take the reader to their

page to page, and

sometimes gets

expected destination.

internal links take the


A user never becomes

reader to their


expected destination.

A user rarely

becomes lost.

There are no errors in

There are 1-3 coding

There are 4-5

There are more than 6

coding errors on


coding on the site, as

errors on the site, as

coding errors on the


the site, as found

found by me or an

found by me or an

site, as found by me or

by me or an online

online validator.

online validator.

an online validator.




Page 3 of 3