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