eg-259:cw1
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:cw1 [2012/02/15 11:04] – [Submission Details] eechris | eg-259:cw1 [2012/03/09 11:21] (current) – [How this Work will be Assessed] eechris | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Coursework 1: Client-Side Programming ====== | ====== Coursework 1: Client-Side Programming ====== | ||
- | **Formally issued on**: Tuesday | + | **Formally issued on**: Tuesday |
**Lecturer**: | **Lecturer**: | ||
- | **Due date**: Session on Thursday | + | **Due date**: Session on Thursday |
Line 29: | Line 29: | ||
- The reset button should be labelled " | - The reset button should be labelled " | ||
+ | Your company wants an efficient way of processing employee expense claims. It has decided to use create a web app on its Intranet for this purpose. You are to create an expenses submission form with the following features: | ||
+ | * There must be fields to capture the employee' | ||
+ | * The expenses will be set out in a table with initially 3 rows, for each expense you need | ||
+ | * Date | ||
+ | * Description | ||
+ | * Cost | ||
+ | * Receipt available? Y/N | ||
+ | * There should be a //total claim submitted// row and the //total amounts claimed// should be computed automatically. | ||
+ | * There should be a button that adds an extra row to the expenses form if three items is insufficient. | ||
+ | * It should not be possible to submit an invalid form. | ||
+ | * Employee details, apart from company mobile are required fields | ||
+ | * Email, mobile and employee number should be in the correct format | ||
+ | * There should be at least one receipted expense claim | ||
+ | * Each expense must have a date and description and cost must be a decimal number with two decimal digits. | ||
+ | * The form should calculate two costs when the expense amount in any row is changed: | ||
+ | * expenses for which receipts are available | ||
+ | * expenses for which receipts are not available which will be displayed as " | ||
+ | |||
+ | You should think about the names that you will be passing to the server-side of the web app in the choice of your field names. | ||
+ | |||
+ | Where possible, all error messages should display in the form and be highlighted by colour changes and change of focus. | ||
+ | |||
+ | //Hint//: Start by creating the form in HTML5 and then write the JavaScript to make it work. Use the new HTML5 input types and form validation attributes where supported. | ||
===== Submission Details ===== | ===== Submission Details ===== | ||
Line 38: | Line 61: | ||
===== How this Work will be Assessed ===== | ===== How this Work will be Assessed ===== | ||
+ | JavaScript must be used for the expenses calculation but you can and should use the new HTML5 form elements and validation attributes where appropriate. For extra credit you will provide JavaScript alternatives to these if the browser doesn' | ||
+ | |||
+ | You may assume that JavaScript will be turned on ... but should provide a warning message to the user if it isn't! | ||
There will be: | There will be: | ||
- | * 8 marks for successful completion of the exercise; | + | * 7 marks for successful completion of the exercise; |
- | * 1 mark for **valid** | + | * 1 mark for **valid** |
- | * 1 mark for **valid** use of CSS; | + | * 1 mark for **creative** use of CSS; |
- | * 2 marks //extra credit// if the error messages are embedded in the document rather than using alerts. | + | * 1 marks if the names you choose for your form elements will work well server-side. |
- | * 3 marks //extra credit// will be awarded | + | * 2 marks //extra credit// |
+ | * 3 marks //extra credit// will be awarded | ||
Late submissions will **not be marked**. | Late submissions will **not be marked**. |
eg-259/cw1.1329303851.txt.gz · Last modified: 2012/02/15 11:04 by eechris