ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Assignment

?
?
maamir farooq
maamir farooq

This document provides instructions for an assignment to create a library book lost voucher form using jQuery. It includes: 1. Details on the form fields and functionality required, including adding edit boxes, validation, and updating one copy when the other is changed. 2. Instructions to add a date picker and use regular expressions for validation. 3. A second unrequired task to create a search box that can expand into an advanced search form using fade in/out effects.

1 of 3
Download to read offline
WT Assignment III Due date: 09 March 2017 8:00AM Task 1: Create a library book lost voucher form that should look like given below. (use assignment.html for starting) Note: ? Properly indent the code (jQuery or HTML), if there is no readability in the code you can loose upto 20% of marks. Only Task 1 should be submitted, do task 2 for your own practice. ? Use jQuery Cheat Sheet for selecting proper function this is the info box ¡­ add or remove the class using jquery to get error or info affect ¡­ Librarian Copy Voucher no: 19030 Due Date: Date here Member Name: ABC Member ID: 14CS01 Member Address: Address Member Type: Type list Book Lost: Name of the Book Book Author: author Fine: 1000 Total Payable: 1000 Member Copy Voucher no: 19030 Due Date: Date here Member Name: ABC Member ID: 14CS01 Member Address: Address Member Type: Type Book Lost: Name of the Book Book Lost: Name of the Book Fine: 1000 Total Payable: 1000 ? On single click of the red contents there must appear a textbox for editing the contents o Member type is a select list with items (Staff, Student, Faculty) o For Due Date use jQuery Date Picker (see helping material for date picker at the end) Print
? After editing text; box must disappear and contents will be placed as simple ? Contents given in blue should automatically change ? Contents given in black are static & must not change ? Only edit will happen to Librarian copy (no edits for member copy) ? Member copy should update itself when there is a change in librarian copy ? Every field must be validated when field loose the focus o If there is an error show in the info paragraph and change the paragraph class to error o Voucher no must be integer and greater than 100 o due date must not empty o Name must be 3-15 characters o Member ID must be like NNWW5NNN (where N is digit and W is A-Z), use regular expression for that (see helping material for regular expression at the end) o Member Address must be 3-20 characters o Name of book can be 3-20 characters o Fine amount can be 1.00-5000.00 (float) ? On click of print button o Validate the full voucher (there is no textbox like things, you have to get HTML contents) and if there is an error show error list in the info paragraph and change that paragraph class to error o If everything is correct ? Change info paragraph class to success and show wait print dialog is opening ¡­ ? use window.print() function to show print dialog to user ? use chrome to test that and save it in PDF cool! You have to do this using jQuery. For date picker see www.eyecon.ro/datepicker/ OR http://jqueryui.com/datepicker/ For regular expressions see http://eloquentjavascript.net/09_regexp.html AND https://www.tutorialspoint.com/javascript/javascript_regexp_object.htm AND https://code.tutsplus.com/tutorials/you-dont-know-anything-about-regular-expressions-a- complete-guide--net-7869
Task 2: Often users want advance search in every site also there is simple search box. Provide convenience to users that instead of opening new page for advance search just open the form right there (on advance search click and again click on advance search form should be hidden). Use fade in/out effects for transitions. Search: OR Advance Search Search: OR Advance Search It is a div. Place some form controls here. This effect is also used to hide menu, or drop down menus etc.

More Related Content

Assignment

  • 1. WT Assignment III Due date: 09 March 2017 8:00AM Task 1: Create a library book lost voucher form that should look like given below. (use assignment.html for starting) Note: ? Properly indent the code (jQuery or HTML), if there is no readability in the code you can loose upto 20% of marks. Only Task 1 should be submitted, do task 2 for your own practice. ? Use jQuery Cheat Sheet for selecting proper function this is the info box ¡­ add or remove the class using jquery to get error or info affect ¡­ Librarian Copy Voucher no: 19030 Due Date: Date here Member Name: ABC Member ID: 14CS01 Member Address: Address Member Type: Type list Book Lost: Name of the Book Book Author: author Fine: 1000 Total Payable: 1000 Member Copy Voucher no: 19030 Due Date: Date here Member Name: ABC Member ID: 14CS01 Member Address: Address Member Type: Type Book Lost: Name of the Book Book Lost: Name of the Book Fine: 1000 Total Payable: 1000 ? On single click of the red contents there must appear a textbox for editing the contents o Member type is a select list with items (Staff, Student, Faculty) o For Due Date use jQuery Date Picker (see helping material for date picker at the end) Print
  • 2. ? After editing text; box must disappear and contents will be placed as simple ? Contents given in blue should automatically change ? Contents given in black are static & must not change ? Only edit will happen to Librarian copy (no edits for member copy) ? Member copy should update itself when there is a change in librarian copy ? Every field must be validated when field loose the focus o If there is an error show in the info paragraph and change the paragraph class to error o Voucher no must be integer and greater than 100 o due date must not empty o Name must be 3-15 characters o Member ID must be like NNWW5NNN (where N is digit and W is A-Z), use regular expression for that (see helping material for regular expression at the end) o Member Address must be 3-20 characters o Name of book can be 3-20 characters o Fine amount can be 1.00-5000.00 (float) ? On click of print button o Validate the full voucher (there is no textbox like things, you have to get HTML contents) and if there is an error show error list in the info paragraph and change that paragraph class to error o If everything is correct ? Change info paragraph class to success and show wait print dialog is opening ¡­ ? use window.print() function to show print dialog to user ? use chrome to test that and save it in PDF cool! You have to do this using jQuery. For date picker see www.eyecon.ro/datepicker/ OR http://jqueryui.com/datepicker/ For regular expressions see http://eloquentjavascript.net/09_regexp.html AND https://www.tutorialspoint.com/javascript/javascript_regexp_object.htm AND https://code.tutsplus.com/tutorials/you-dont-know-anything-about-regular-expressions-a- complete-guide--net-7869
  • 3. Task 2: Often users want advance search in every site also there is simple search box. Provide convenience to users that instead of opening new page for advance search just open the form right there (on advance search click and again click on advance search form should be hidden). Use fade in/out effects for transitions. Search: OR Advance Search Search: OR Advance Search It is a div. Place some form controls here. This effect is also used to hide menu, or drop down menus etc.