ICT-4570 Homework 2

Purpose

This exercise allows you to explore creating simple, linear JavaScript programs which include simple computation.

What to Hand In

• HTML, CSS, and JavaScript files for the first part
• HTML, CSS, and JavaScript files for the second part
• Screenshots of the prompts and alert result for the first part with good and bad data
• Screenshots of the screen and result for the second part with good and bad data

Canvas submission instructions:
Please combine multiple files into a single "zip" archive, and save it in a location that you will remember. When you are ready to submit the assignment solution, open the assignment in Canvas, and click on the Submit for Evaluation button at the top, attach the file, and click Submit for Evaluation at the bottom.

Problems

1. Using the pop-up prompt
   1. Prompt the user for a width for a rectangle
   2. Prompt the user for a height for a rectangle
   3. Alert the user to the resulting area and perimeter of the resulting rectangle.
2. Using a form
   1. Start with the form noted below
   2. Complete the simple function getarea, outlined below, to compute the area and perimeter of the rectangle
   3. Display the result to the user by inserting the result in the element with the area id.

Notes

• The prompt function (or prompt if you prefer) takes one parameter, which is the message to prompt the user with. It has a second, optional, parameter which is the default text to fill in.
  The function returns the string the user entered, if the user clicked OK.
  If the user clicks Cancel, null is returned.
• The result of prompt should be captured in a var for later use.
• A simple form which contains the required elements for part 2 follows:

      <form id="areaform">
        <label for="wid">Width:</label>
        <input id="wid">
        <label for="hgt">Height:</label>
        <input id="hgt">
        <br/>
        <label for="area1">Area:</label>
        <output id="area"></output>
        <br/>
        <label for="perimeter1">Perimeter:</label>
        <output id="perim"></output>
        <br/>
        <button onclick="getarea()" type="button">Get Area</button>
      </form>
          

• In part 2, the value of a form field with the id myid can be retrieved in a JavaScript function via document.getElementById('myid').value
• Skeleton of the JavaScript function. Fill in the right-hand side of the equals (=):

         function getarea() {
           var wid = 
           var hgt = 
           var area = 
           var perim = 
           document.getElementById('area').innerHTML =
           document.getElementById('perim').innerHTML = 
         }
          

• In part 2, what is the effect of using type="number" in the input fields?

Evaluation

Criteria	Weight
Pop-up prompt order and logic on HTML, CSS, and JavaScript	25
Pop-up prompt screen shots with values filled in with 10 and 10	10
Pop-up prompt screen shots with values filled in with abc and def	5
Form order and logic in HTML, CSS and JavaScript	45
Form screen shots with values filled in with 12.5 and 15	10
Form screen shots with values filled in with 3,abc and 4def	5