CISC Homework H01

Introduction

In this assignment, get familiar with constructing HTML forms and working with individual parts of the form.

You will use the currency code you have been assigned (e.g. USD, EURO), and convert from that currency to another currency.
Here are a few things that you will need to complete this assignment:

• Your Currency Code
• Knowledge about basic for loops and if statements
• Knowledge about DOM objects in web forms. A good reference includes:
  • www.w3schools.com
  • Your book

Overview

In this assignment, you will:

• Get completely familiarized with different types of form input elements.
• Get completely familiarized with the select element.
• Use JavaScript to access, use, and manipulate data in this elements
• Choose 10 country currencies to convert your currency to.
• Create a shell of a webpage that has the following:
  • Two input elements of type "text" for input and output.
  • One select element for holding your 10 currencies
  • At least one h1 element, one p element, and one hr element
  • At least one input element of type "button" for executing a conversion
• As some HTML elements are not listed as requirements, it is a requirement that your web page be user friendly and have a flow to it as to model what you would expect to see on a basic currency conversion web page. (see www.xe.com as a reference)

Step-by-Step Instructions

Step 1: Reading

Read the resources listed above to get familiar with JavaScript and DOM objects. Also, study the concurrent chapters in your book to understand control structures (for loops and if statements at bare minimum).

Step 2: Review and study the holes in the code to get familair for what the assignment is asking you to do.

Pay special attention to the converter.js file and how the code calls the initializing functions.
HINT: Studying this file will give you a hint on how to construct your .html file.

Step 3: Proceed with filling in the code in the web page at the locations marked by the indicators below.

• *1* — You should enter the function call for initializePage() JavaScript function using the correct body attribute.
• *2* — You should use your creativity in creating a form for input and output. Use www.xe.com as a guide in your design. The following is required for successful completion of this homework and subsequent homework assginments:
  • All elements must utilize the id attribute.
  • You must include all elements reverenced above
  • Use the above site to obtain the conversion rates from your given currency to each of the 10 countries you have chosen. Convert 1 unit of currency to each of the 10 currencies to obtain that countries conversion rate (i.e. convert 1.00 USD to EURO)
• *3* — A form enclosing all elements required:
  • Two input elements of type "text"
  • One select element
  • One of each of h1, hr, and p elements.
  • One input element of type "button"

Step 4: Proceed with filling in the JavaScript code in the converter.js file marked by the indicators below

• *1* — Create an array containing all of the 10 countries you have chosen for conversion options. The array element should look like this:
  
  'Country — Conversion Code'
  
  (e.g. 'United States Dollars - USD')
• *2* — Create an array containing the corresponding conversion values of the 10 countries you have chosen. IMPORTANT: for correct conversion, your the elements in both arrays must match up. (e.g. country[0] must correspond to the correct conversion value in conversionCode[0])
• *3* — Fill in createCountryOpts(). Hints:
  • You need to populate the select element that holds your 10 countries with option elements that each hold one of the 10 countries
  • You need to be familiar with how JavaScript interacts with DOM objects on a web page in order to complete this part and many other parts.
• *4* — Fill in resetAmountInput() and resetAnswerInput(). (P.S Here is your hint as to two of the definite HTML elements you will need)

Submission

Zip all of your files in a .zip file and submit your file on WebCT.

Grading Rubric (60 pts total)

Due Date: TBA