Instructions for ITM 325 Assignment 4 (80 total points)

Using Visual Studio, create a new website named assignment4.

Add a new Web form to your website named SimpleCalc.aspx.

Using HTML, CSS, and ASP.NET server controls, create the following form.

Use a three column table with five rows inside of a div element thats inside of a form element.

Style the div element as follows:

i.Set the width to 400 pixels.

ii.Set the height to 350 pixels.

iii.Set the border to one pixel solid black.

iv.Set the margins to center your application with 15 pixels top and bottom.

v.Set the border radius to 20 pixels.

vi.Set the background color to a light to medium shade of gray.

Center your title within the div element but above the table element using a h2 element.

Set the widths for the three table columns as follows: 50%, 40%, and 10%.

Place the Label controls in the left column.

Right justify the labels.

The two Text Box controls and the Radio Button controls go in the first three rows of the middle column.

For the output label and output text box merge the three columns and center the output Label control and Text Box control within the merged column.

Text in the output Text Box control should be centered.

For the two buttons merge the three columns and center the two Button controls within the merged column.

Set the Text property for the first Button control to Calculate.

Set the Text property for the second Button control to Clear.

Set the font size for all of the labels and text boxes to large.

Set the button font size to large for both buttons.

Add six pixels of padding to each button.

Set the width for each button to 100 pixels.

Add the following functionality to your form.

When numeric values are added to the first and second number text boxes and the addition operator is selected like this pressing the Calculate button results in this.

Selecting one of the other operators and pressing Calculate will result in this.

Pressing the Clear button resets the form to this.

The Clear button should work even with validation errors.

Validate the user input as follows.

Place an ASP.NET Validation Summary control inside the form element but below the table element.

Style the Validation Summary control as follows.

i.Set the width to 400 pixels.

ii.Set the margin to center the Validation Summary control with a 10 pixel margin top and bottom.

iii.Set the font size for the Validation Summary control to large.

iv.Set the font color for the Validation Summary control to red.

Place a Required Field Validator control in the third column of the first, second, and third rows of the table.

Link the Required Field Validator controls to their corresponding control in the second column.

For each Required Field Validator control, set the Text property to *.

Set the ErrorMessage property to an appropriate error message for each of the Required Field Validator controls.

Set the font size too large and the text color to red for each of the Required Field Validator controls.

Pressing the Calculate button without any user input should results in something similar to the following.

In the first and second row place a Compare Validator control next to the Required Field Validator control.

Link each Compare Validator control to the corresponding control in the second column.

For each Compare Validator control set the Type property to Double.

For each Compare Validator control set the Operator property to DataTypeCheck.

For each Required Field Validator control set the Text property to *.

Set the ErrorMessage property to an appropriate error message for each of the Compare Validator controls.

Set the font size too large and the text color to red for each of the Compare Validator controls.

Pressing the Calculate button with nonnumeric values entered for First Number and Second Number should results in something similar to this.