Assessment 3: First mobile-fit website

Assessment 3: Create your first mobile-fit website (25 points)

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. :
1. Application Features: The web application has a simple
feature set, and users should be able to do the following:
a. Create notes.
b. Edit notes.
c. Delete notes.
d. Store notes on the device that is running the application,
across browser sessions.
e. 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.
2. Second, use jQuery UI to build the web application interface.
3. Third, use the following steps to use both libraries:
a. 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.
b. 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.
c. 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:
1. The application should start with an empty list.
2. A form should be used for note creation, so that the user will use it to enter a note.
3. 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.
4. When a user adds a new note, it should appear at the bottom of the list.
5. Users should have the ability to add a note to the list (Make sure to update the list).
Page 2 of 3
6. 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
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.
• 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-amac-2260188
• Free file compressor application for Mac: https://theunarchiver.com/
• How to save a pdf in MS Word document: https://www.bettercloud.com/monitor/theacademy/save-word-doc-pdf/
Page 3 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
Create notes
and Delete
notes
Notes are added or
deleted with the
default style and their
content is updated
correctly. The app
layout is organized,
and new notes are
added appropriately to
the end of the list.
Notes are added or
deleted with the
default style and their
content is updated
correctly. However,
the app layout is not
organized—yet new
notes are added
appropriately to the
end of the list.
Notes are added or
deleted with the
default style, but
their content is not
updated correctly.
Furthermore, the
app layout is not
organized, and new
notes are not
added appropriately
to the end of the
list.
Notes are added or
deleted without the
default style, and their
content is not updated
correctly. The app
layout is not organized,
and new notes are not
added appropriately to
the end of the list.
/5
Edit notes
Notes edit in the form
and form function
permits data entry.
Edited notes are
correctly positioned in
the main view list.
Notes edit in the form
and form function
permits data entry.
However, edited
notes are incorrectly
positioned in the
main view list.
Notes edit in the
form, but form
function does not
permit data entry.
Furthermore, edited
notes do not
position correctly in
the main view list.
Notes do not edit in the
form, but form function
does not permit data
entry. Furthermore,
edited notes do not
position correctly in the
main view list.
/5
App layout
Notes are organized,
and their width fits the
page. Notes order as
required. The layout is
organized and there
are no overflow issues.
Notes are organized,
and their width fits
the page. Notes
order as required.
However, the layout
is not organized, and
there are a few
overflow issues.
Notes are
organized, but their
width doesn’t fit the
page. Notes order
as required.
However, the layout
is not organized,
and there are some
overflow issues.
Notes are not
organized, nor does
their width fit the page.
Notes order as required.
However, the layout is
not organized, and
there are a lot of
overflow issues.
/5
Navigation
Links for navigation
are clearly labelled
and consistently
positioned. They allow
the reader to easily
move from a page to
related pages, and
take the reader to their
expected destination.
A user never becomes
lost.
Links for navigation
are clearly labelled,
though perhaps not
always consistently
positioned. They
allow the reader to
easily move from
page to page, and
internal links take the
reader to their
expected destination.
A user rarely
becomes lost.
Links for navigation
take the reader to
their expected
destination, but
some needed links
seem to be
missing. A user
sometimes gets
lost.
Some links do not take
the reader to the sites
or pages described. A
user often feels lost.
/5
Coding
There are no errors in
coding on the site, as
found by me or an
online validator.
There are 1-3 coding
errors on the site, as
found by me or an
online validator.
There are 4-5
coding errors on
the site, as found
by me or an online
validator.
There are more than 6
coding errors on the
site, as found by me or
an online validator.
/5
TOTAL /25