Assessment 3: Create your first mobile-fit website

Assessment 3: Create your first mobile-fit website (25 points)
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 lesson 6, 7 and 8 to complete this assignment. Please check the instruction and requirements to
complete this assignment.
◼ Instructions
Use these instructions to finish the assignment 2 ‘Project plan’
requirement:
1. Application Features: The web app has a simple feature set,
and users should have these following abilities:
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 regarding selecting page
elements, adding new page elements, and updating the DOM.
2. Second, use jQuery UI to build the web application interface.
3. Here is how you can 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 with a form. Use jQuery UI library to do so.
b. Need a view that renders a list of the existing notes. We will 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, defined the features and design of the app, which brings us right into the realm of
specifications and deploying.
◼ Requirements
I would highly recommend keeping your design simple as much as possible. Your design must meet at
least most of these requirements:
1. The application should start with an empty list.
2. Creating a note should be done using the form, where the only user allowed to enter a note.
3. Where a user adds or removes a note, the main page view should be updated. That means you
need to keep your notes on the list.
4. Adding a new note should be position 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 done throw the same form that
creates or allowed notes.
Please refer to the rubric at the end of this document for evaluation details.
Submit
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 with compressing your main/root folder and only send 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 point Good: 3 point Fair: 1 point Poor: 0 point Score
Create notes
and Delete
notes
Notes added or
removed with default
style and its content
updated correctly. The
app layout is
organized, and new
notes added to the end
of the list.
Notes added or
removed with default
style and its content
updated correctly.
However, the app
layout is not
organized, but new
notes added to the
end of the list.
Notes added or
removed with the
default style, but its
content not
updated correctly.
However, the app
layout is not
organized, and new
notes are not
added to the end of
the list.
Notes added or
removed without their
default style and their
content not updated
correctly. The app
layout is not organized,
and new notes are not
added to the end of the
list.
/5
Edit notes
Notes edit in form
function allows
entering data. Edited
notes placed to their
right position on the
main view list.
Notes edit form
function allows
entering data.
However, edited
notes do not place to
their right position on
the main view list.
Notes edit in form,
but form function
does not allow
entering data.
However, edited
notes do not place
to their right
position on the
main view list.
Notes edit in form, but
form function does not
allow entering data.
However, edited notes
do not place to their
right position on the
main view list.
/5
App layout
Notes are organized,
and their width fits into
the page. Notes order
as required. The layout
is organized and there
no overflow issues.
Notes are organized,
and their width fits
into the page - Notes
order as required.
However, the layout
is not organized, and
there are a few
overflow issues.
Notes are
organized, and their
width doesn’t fit into
the page - Notes
order as required.
However, the layout
is not organized,
and there are some
overflow issues.
Notes are not
organized, and their
width doesn’t fit into 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,
consistently placed,
allow the reader to
easily move from a
page to related pages
and take the reader
where he expects to
go. A user does not
become lost.
Links for navigation
are clearly labelled,
allow the reader to
easily move from
page to page, and
internal links take the
reader where he
expects to go. A user
rarely becomes lost.
Links for navigation
are the reader
where expected,
but some needed
links seem to be
missing. A user
sometimes gets
lost.
Some links do not take
the reader to the
sites/pages described.
A user typically feels
lost.
/5
Coding
There are no errors in
another 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