i need someone to help me create an HTML5 page with java script

Project 5: Using JavaScript

10 Points Possible

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

All textboxes in the display area

should be “readonly”

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.

Sample 2:

Sample 3:

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.