Description:
This assignment requires you to rewrite your HW2 (Online Car Rental) based on RWD techniques to make your website can dynamically change its layout and styles according to device screen sizes.
Instead of creating responsive web design from scratch, you are going to use ONE of the following frameworks.
• Skeleton (https://www.getskeleton.com)
• Bootstrap (https://twitter.github.com/bootstrap/)
• Foundation (https://foundation.zurb.com)
Question 1:
You will create a website for a rental car company. Here are specifications:
Home page specification
1. Create a home page that introduces the rental car company. The page should have a header and footer. In the document body, it just displays a welcome message or other greeting message. Display the Company's logo on the home page.
Order page specification
2.The rental order web page that you will calculate the cost of a rental car based on following criteria. The base price of a car depends on the car type. The following table lists the car types and their associated costs:
1.Use car pictures to show different car types.
2. Users should select the car type from a list box or drop-down list. A surcharge is added based on the city in which the car is rented according to the following schedule:
Optional services:
o Collision insurance is $17.00 / day for compact cars, $22.00 / day for mid-size cars, and $28.00 / day for luxury cars.
o Prepaid gift card for gas stations: $100 each.
o If the user chooses Luxury car type, the system will give another option for daily car wash service for the whole rental duration: $50
1.You should use 2 Calendar controls (HTML5) allowing the user to select the starting and ending date of the car rental. Validate the inputs to make sure that the dates selected are dates in the future and that the starting date should be before the ending date.
2. Create an input textbox allowing the user to enter the number of days that they want to rent the car. Use the appropriate validation control(s) to check the user's input. The discounts may be applied to the cost of rental if the duration of rental is more than 15 days as follows:
o 15 days -> 10% off
o 30 days or more -> 20%
These discounts will not be applied to optional services.
3. Create a Submit button to submit the quotation request. When the user clicks the Submit button, display a second output section (div) on the same page only if the input is valid. If the input is not valid, indicate the error(s) to the user accordingly. This div element should be invisible until the submit button is clicked. Calculate the cost of the car rental and display the results in the output section (div) on the same page