CIS 144 Phase 2 Basic Operations

Create a web page using HTML5 with the heading CIS 114 Homework 2 - Basic Operations.

The contents of this page should be a list of links referring to Parts 1-2 discussed below. Label the links, Part1, Part2 and display a short description of each part

Think about user experience and user interface!!! Some tips:

• For each page that exhibits a part of HW2, there should be a way to go to other parts of HW2 or to the home page of HW2 - the user should not need to use the back button of the browser
• Do not make the user end up with many tabs/windows opened in the browser - open the pages of your site in the same tab/window and only use another tab/window if you are opening another website or web page that is not yours.
• Think about what the user will be required to type and do not allow the user to type anything that would offer a "weird" final result such as NaN.

Part 1:

Create a webpage that contains a script that displays in pairs and strong (bold), the letters xy and the numbers 12 and 89 on the same line, with each pair of characters separated by one space. Write the script using document.write statements. Use a font family of Times New Roman and the color red for the letters xy, a font family of Arial and the color blue for the the numbers 12 and a font family of Impact, the color green , and emphasized (in italics) for the numbers 89 .

Your output should look like this: see image.

Part 2:

Create a webpage that contains a script that inputs three integers via form text boxes and displays the sum, average, and product of the three integers, and the smallest and largest of the three integers. Your results should be displayed using a form textarea or a div element - DO NOT USE ALERT!!!.

You should not present any result if the user does not type NUMBERS in the input boxes!!! An error message should be displayed in this case. If the input from the user are all valid, then present the result and the error message should not be shown anymore! If the user reuses the form and type something invalid, then remove the old result and present the error message instead!

Hints:

• For finding the smallest and largest number, use the Math Object Methods of min and max.

EXTRA CREDIT

The exchange rates for 1 U.S. dollar in July 2019 were:

Create a webpage containing a script that the user will input an amount in U.S. dollars and display in a table its equivalent in each of the above foreign currencies, rounded to 2 decimal places. The amounts should be shown aligned to the right (right justified).

For example: an input of 10 U.S. dollars yields (notice that the result is not showing more than 2 decimal places):

I suggest using the following display - of course, the user would not be able to type anything in any of the boxes of the Value column

Use the CSS pseudo-class :focus to the input box where the user will type the amount of dollar to be converted so when the user focus (enter with the mouse) that box, the background will be yellow.

Note: that the above values for rates can be displayed as faded text within a grey box, by using the attribute of disabled in the form input statements. An alternative is to use the attribute of readonly, which will display the rates as normal text within a grey box. But the user should not be able to type anything in the Rate, neither the calculated Value columns. The only place the user can enter/type a value will be in the box beside the "Enter Amount of U.S. Dollars"!