Enhance the prototype created in Assignment 1 with jQuery validation - Assignment 2

Assignment 2

Due Date:

Softcopy: 1st March, 2020, Sunday, at 11:59PM.

Hardcopy and Demo: The first day your class takes place after the softcopy is due. Check the course Calendar in eConestoga under Content->Course Information->Schedule Summary.

Topic:

Enhance the prototype created in Assignment 1 with jQuery validation. This version will be used in the next assignments.

Before you begin:

·         You must complete Assignment 1 before proceeding.

·         You must know how to search and use the online jQuery Mobile Docs to enhance your mobile app.

·         Make yourself familiarize with the hands on examples done in the lab during class time.

·         Make sure the view the screenshots in color, as you will be required to match the color themes used exactly.

·         The assignment specification and screenshots are made assuming a student’s name Jason Bourne (and initial is JB). Replace Jason Bourne with your full name, JB with your own initial. Also replace xx with your own initials.

·         Make sure to fulfill all programming and assignment standards. The Standards Summary is available at eConestoga.

·         All id and name attributes must have your initial (e.g., jb for Jason Bourne) as prefix.

·         All javascript file and function name must have your initial as prefix.

·         See AvengersDB-iteration2 hands on program in details.

Problem Specification:

Task 1: Create Assignment 2 project

·         Create an empty project and name it: XXFeedbackA2 (where XX is your initials).

·         Copy all the files and folders from your assignment 1 project except .idea folder (If Webstorm is used to create your Assignment 1. If you use any other IDE, .idea folder will not be created).

·         Add the following Javascript files under js folder:

o   xxdatabase.js

o   xxfeedbackDAL.js

o   xxfacade.js

o   xxutil.js

o   xxglobal.js

·         Add the following Stylesheet file under css folder:

o   xxmystyle.css

·         Include all of them to index.html

·         Add ready event to xxglobal.js file. All the event handlers must be defined in xxglobal.js file.

 

Task 2: Modify ‘Home’ page

·         Update the headers to indicate Assignment 2 (Change all A1 to A2). See the screenshot below. Rest of the home page will be the same as your assignment 1.

 

 

Task 3: Modify ‘Add Feedback’ page

·         Update the page by according to the following screenshot.

·         Add a Type combobox containing Other, Asian, Canadian. “Other” will be shown by default.

·         If ‘Do you want to add your ratings’ checkbox is checked then 3 rating textbox  (Food Quality, Service, Value (Hint: input type=”number”)) and Overall Rating (Calculated (Hint: input type=”text”)) will be visible. Otherwise they will be hidden.

·         When the page will be shown, ‘Do you want to add your ratings’ checkbox will be unchecked by default.

·         Overall Rating textbox is readonly/disabled.

·         Any change in the 3 rating text boxes will automatically update the overall Rating (calculated) textbox (Show average will follow the formula:

o   (Quality + service + value) * 100/15 .

o   Add a % symbol

·         The 3 rating textboxes will be initialized with 0.

·         Implement the show/hide feature in xxglobal.js file. Hint: put the 4 texboxes in a div, show and hide the div if the check box is checked/unchecked, respectively. See jQuery built in function show(), hide() (https://www.w3schools.com/jquery/jquery_hide_show.asp)

.

 

Task 4: Update ‘Modify Feedback’ Page

·         Update the ‘Modify Feedback’ page in the same way as ‘Add Feedback’ page.

·         ‘Do you want to add your ratings’ checkbox will behave in the same way. Check the following screenshot(s).

 

 

 

Task 5: Implement validation

·         Include jQuery validation Javascript (available in eConestoga->Content->Resources->_lib.zip) in the index.html file

·         Define your validation logic in xxutil.js file

·         Add the following styles to xxmystyle.css file:

label.error{

    color: #F00;

    font-weight: bold;

}

 

input.error,

select.error,

textarea.error {

    border: 1px red solid;

}

 

·         Both ‘Add a Feedback’ and ‘Modify Feedback’ pages will have similar validation (defined in xxutil.js file). Hint: You need to implement a validation function for each form.

·         The validation will get triggered when Save button (for Add Feedback page) and Update button (for Modify Feedback page) is clicked.:

o   Business Name: required and length must be 2-20 characters long

o   Reviewer Email: required and valid email address

§  Any valid email will be sufficient.

§  Making only conestoga email valid will result in deduction of marks.

o   Reviewer Date: required

o   If ‘Do you want to add your ratings?’ checkbox is checked

o   Food Quality, Service and Value: value must be 0-5

§  Note: don’t use min and max attributes for the ratings in the html file, rather define your own rules and messages for them in xxutil.js file.

·         Check the following screenshot:

 

 

Task 6: Update Settings page

·         ‘Save Defaults’ button will save the ‘Default reviewer Email’ to local storage and show a message through alert.

·         Use your own Conestoga email address as initial email when the page is shown.

·         Check the following screenshots:

 

 

 

Hints: check LocalStorage.zip file available under Assignments module. See the script block to find out how to use localstorage

Task 7: Test your app

·         Use Chrome browser and provide screenshots of the following

o   Home Page

o   Add a Feedback page with checkbox unchecked

o   Add a Feedback page with checkbox checked and with validation checked

o   Modify Feedback page with checkbox unchecked

o   Modify Feedback page with checkbox checked and validation checked

o   Settings page with alert (as shown above)

o   Developers tool containing Local Storage information (just like the screenshot above)

·         Save your screenshots to xxA2Screenshots.doc file.

Task 8: Upload app

·         Make a zip file xxAssignment2.zip that will contain

o   Complete project for your app

o   xxA2Screenshot.doc file.

o   After unzipping, the application must run without any modification.

·         Login to eConestoga and upload to the dropbox: Assignment 2.

·         For late submission: marks will be deducted as specified in the coversheet.

Task 9: Demo your app

·         Demo your app on specified demo date. Please check the calendar available under “Course information”.

·         Bring your hard copy during the demo containing:

o   Assignment coversheet and marking sheet

o   Printout of HTML File

o   Printout of xxglobal.js and xxutil.js

o   Printout of xxA2Screenshot.doc containing all screenshots

o   Assignment 2 marking sheet (The last page of this document)

·         You must demo your project within 1 week of due date. Otherwise you will not get the marks allocated for demo. 

·         If you choose not to demo at all, you may drop the hardcopy of your assignment at WMB-4G26. However, if you don’t submit the hardcopy, marks will not be uploaded.

Marking Sheet

 

 

Description

Marks Allocated

Marks Achieved

1

Home Page designed as specified

5

 

2

Add a Feedback page is designed as specified

10

 

3

Add a Feedback page ratings show/hide

10

 

4

Add a Feedback page validation (in Save button’s click handler)

15

 

5

Modify Feedback page is designed as specified

5

 

6

Modify Feedback page ratings show/hide

5

 

7

Modify Feedback page validation (in Update button’s click handler)

15

 

8

Settings page stores info to local storage

10

 

9

7 screenshots

13

 

10

Overall ratings is updated automatically whenever any of the quality, service, value changes in add and modify pages.

6+6

 

Deduction

 

Assignment Standard (proper project name, this marking sheet, etc., see the standard documents for detail)

5 x ________

 

 

Prefix missing for id and name attributes

2 x ________

 

 

id attribute is missing for any input control

3 x ________

 

 

 

name attribute is missing for any input control

3 x ________

 

 

 

JavaScript file and function name not prefixed

2 x ________

 

 

 

Programming Standard

1 x ________

 

 

 

Bug

3-10 based on severity

 

 

 

Late

­­_________days

 

 

 

No Demo

50

 

 

Total

 

 

 

 

 

Answer Preview
This is only a preview of the solution. Please use the purchase button to see the entire solution