$24
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.
Instructions
Use these instructions to execute the ‘Project plan’ Plan’ you created in Assignment 2. :
Application Features: The web application has a simple feature set, and users should be able to do the following:
Create notes.
Edit notes.
Delete notes.
Store notes on the device that is running the application, across browser sessions.
View the entire collection of notes.
How to plan this project:
First, take care of the details for selecting page elements, adding new page elements, and updating the DOM.
Second, use jQuery UI to build the web application interface.
Third, use the following steps to use both libraries:
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.
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.
Now you must define the features and design of the app, which brings us right into the realm of specifications and deployment.
Requirements
I would highly recommend keeping your design—as much as possible—simple. Your design must, at a minimum, meet most of these requirements:
The application should start with an empty list.
A form should be used for note creation, so that the user will use it to enter a note.
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.
When a user adds a new note, it should appear at the bottom of the list.
Users should have the ability to add a note to the list (Make sure to update the list).
Page 1 of 3
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.
Submission
Name your folder assignment_3_project.
Right-click on the folder and select ‘Send to - Compressed (zipped) folder’.
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.
How to zip a file in Windows 10: https://www.laptopmag.com/articles/how-to-zip-files-windows-10
Free file compressor application for Windows: http://www.7-zip.org/download.html
How to zip a file in Mac: https://www.lifewire.com/how-to-zip-and-unzip-files-and-folders-on-a-mac-2260188
Free file compressor application for Mac: https://theunarchiver.com/
How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/the-academy/save-word-doc-pdf/
Page 2 of 3
Evaluation
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
Score
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
/5
and Delete
correctly. The app
correctly. The app
the app layout is not
app layout is not
notes
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
list.
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.
/5
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.
/5
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
/5
Navigation
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
lost.
A user never becomes
reader to their
lost.
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
coding on the site, as
errors on the site, as
coding errors on the
/5
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.
validator.
TOTAL
/25
Page 3 of 3
