Solved-Assignment 2- HTML CSS JS (Elective) -Solution

Description

1. According to the picture below, design a similar web page that covers all features (including designing the Date and Time, adding or deleting a row etc.) that introduces in tutorial4. [50 points] (Only completing the tutorial 4 can get 20 points)

2. According to our new requirement, adding several logics, and different error messages should be given for each invalid input. [25 points]

• Normalized the input of License Plate Number. [5 points]

15. The prefix of License Plate Number should be “粤 B”, which serves as the License Vehicle registration institution code. The prefix can be hard written in your code.

15. If there are 5 characters after the prefix, all the characters should be either capital English letters or numbers in the range of 0~9, inclusive.

• 15. If there are 6 characters after the prefix, the first character should be either ‘D’ or ‘F’, and other characters should be either capital English letters or numbers in the range of 0~9, inclusive.

• Normalized the entrance number in a range of 1~7, inclusive. Normalized the Staff Number that is an eight-­‐digit number, which start with 3 or 5. [5 points]

• Normalized the input of arriving time and departure time, which means if the time lower than 10, please add “0” in front as following graph. [5 points]

• Please modify your program to make sure that the License Plate Number, Date and Arrival Time shouldn’t be same. [5 points]

• Please modify your program to make sure that the departure time should be after the arrival time. And if the status is “In”, the departure time should be “-­‐-­‐”, otherwise, the departure time should be a time format. [5 points]

1

OOAD Lab Exercise 2019 Fall SUSTech

3. There are two possible status of a parking record: In and Out. Could you add one column in the table and accordingly, add an item to the form to record the status of a parking record. (Tips: use the <radio> tag, do not forget to check the user’s input.)[5 points]

3. Remove the code in “css” file given to you in tutorial4, and then using a better one instead. We need to make the page nicer. (You can use another CSS, or rewrite the whole page completely using frameworks like Vue.js or ReactJS, etc.) [10 points]

3. It may be a little borthering to display the form when user is just viewing the record information. Could you move the form to a pop-­‐up dialog or create a button to toggle the visibiity of form? The following two pictures are a rough example of dialog. (Tips: You can use a button and toggle the display CSS attribute of the form, or use the Modal Dialog in Bootstrap freamwork.) [10 points]

What To Submit

Submit all of your .html, .css, .js files (or other files if you need) along with the screenshots of your page’s final appearance, into sakai website before the deadline. Please make sure that all of your files can be linked directly in your submission path.

2

OOAD Lab Exercise 2019 Fall SUSTech

It is an elective assignment, and we have another two elective assignments in following weeks. We only mark the grade of these elective assignments for once time, and the final grade of elective assignment is the highest of those three.

3