Project 5: Using JavaScript
The main objective of this assignment is to develop a "Price Estimation" web page using HTML5 and Client- Side JavaScript. The completed page will run as shown in Figure 5.1
When the page is run initially:
• The dropdown list should display: Civic
• The image of the Civic (Civic2.jpg) should display.
• None of the checkboxes should be checked (initially)
• The first radio button (standard Exterior Price) should be checked (initially)
• Base Price textbox should display: $16355.89, Accessories and Exterior Finish Price textboxes should display $0.00, and the Estimated
Price textbox should display $16355.89. (This is the price of a Civic without any optional accessories and with standard finish).
Figure 5.1: The Initial Page View in Chrome|
Please see the remainder of the figures to observe several scenarios during the run-time view of the page.
Business Rules: There should be two models in the Model Combo box: Civic, and Accord. The prices of the relevant items are as follows:
|
Item
|
Civic
|
Accord
|
|
Base Price
|
$17,355.89
|
$19,856.79
|
|
Stereo System
|
$400.22
|
$500.89
|
|
Leather Interior
|
$850.44
|
$1015.85
|
|
GPS System
|
$1,600.00
|
$1,600.00
|
|
Standard Finish
|
$0.00
|
$0.00
|
|
Metallic Finish
|
$305.72
|
$385.67
|
|
Custom Finish
|
$350.00
|
$400.00
|
Hints:
• First develop the GUI interface of the form and the layout (Do not worry about the JavaScript at this stage). However, provide well-named id values for the relevant controls.
• After you have developed the layout, develop the necessary code to calculate the Estimated Total Price incrementally (in stages). For example, first see if the system displays the image and/or price of the car correctly, and then see if it displays the price of the accessories correctly, and so on. To keep the code adequately simple, write a single function that handles all form elements. This function should be called in appropriate onchange or onclick event attributes of the relevant controls.
• Add the two buttons at the bottom of the form. The Print Button, when clicked, should call the built-in window print method - that will invoke the Browser's default printer (very cool!) The Reset Button - should reset the form to the Civic model and its start values (defined at the top of this assignment).
• You may not be able to display the formatting commas in the displayed data (as in $3,754.39). If you cannot, that's alright! If you can display rounded price data with comma formatted (such as $99,999.99), you will receive 1 point extra credit (given that your estimates are all correct).
• Observe that the application is completely dynamic. That means, whenever the user changes a selection, the system will display all appropriate computed data immediately.
To help you get started, I have posted a skeleton html document with some styling that you can use to create a layout similar to what I have displayed in my samples.