Hw #4

Assignment #4: Decision Making

Please NOTE: For this assignment you will make two HTML pages.

First, highlight and copy the following code, paste it into your editor, and save the document as NumberCheck.html.
```
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Number Check</title>
  <script type="text/javascript">
    /* <![CDATA[ */
    function checkTheNumber()
    {
      var num = document.getElementById("theNumber").value;
      var msg = "";
      
      if (num >= 100)
        msg = msg + "The number is greater than ";
        msg = msg + "or equal to 100.";
      
      alert(msg);
    }
    /* ]]> */
  </script>
</head>

<body>
<h3>Number Checker</h3>
<form action="NumberCheck.html" method="post" name="theForm"
      onsubmit="checkTheNumber(); return false;">
  Enter a number: <input type="text" name="theNumber" id="theNumber" />
  <br />
  <br />
  <input type="submit" value="Check the Number" />
</form>
</body>
</html>
    
```
- Identify the bug that is in the page NumberCheck.html, and fix it. [HINT: Enter a number that is LESS THAN 100. The alerted message will be incomplete, because of the bug.] After you fix the bug, reload the page and test the page again. Make sure the message is correct, based on the number that you enter. ("Correct", for now, will mean that the alert message will be empty for numbers less than 100.)
- Now add an else statement to the if statement in NumberCheck.html, which puts the string The number is less than 100. into the msg variable if the num variable is less than 100. After you add these lines of code, reload the page and test the page again. You should see a complete alert message for any number that you enter, now.

Secondly, highlight, copy, and paste the following code into a new file in your editor, and save it as AreaCodes.html.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Area Codes</title>
  <script type="text/javascript">
    /* <![CDATA[ */
    function checkTheCode()
    {
      var msg = "";
      var areaCode = document.getElementById("theCode").options[document.getElementById("theCode").selectedIndex].value;
      switch (parseInt(areaCode))
      {
        case 617:
          msg = "Boston's area code is " + areaCode;
    
        case 212:
          msg = "Manhattan's area code is " + areaCode;
    
        case 415:
          msg = "San Francisco's area code is " + areaCode;
    
        case 813:
          msg = "Tampa's area code is " + areaCode;
      }
      
      alert(msg);
    }
    /* ]]> */
  </script>
</head>

<body>
Select a City:
<form action="AreaCodes.html" method="post" name="theForm"
      onsubmit="checkTheCode(); return false;">
  <select name="theCode" id="theCode">
    <option value="">-- Select a City --</option>
    <option value="617">Boston</option>
    <option value="212">Manhattan</option>
    <option value="415">San Francisco</option>
    <option value="813">Tampa</option>
  </select>
  <br />
  <br />
  <input type="submit" value="Check the Area Code" />
</form>
</body>
</html>

Currently, AreaCodes.html is not displaying the correct area code for a city. Identify the bug, and fix it.
Now modify the switch statement above so that a default value of "You did not select a city." displays if none of the case labels match the areaCode variable.

Add two hypertext links to the index.html file that is in your class folder. Make each of these hypertext links display one of the two html pages that you made for this assignment.
Validate your pages using the W3C HTML Validator. (The Validator will automatically detect whether you have an XHTML or an HTML5 document.)
Upload your files to your class folder. You will need to use an FTP program to upload the files. You will find some general FTP instructions on a page called "FTP Instructions".
Test your pages on the server to make sure they have no errors in them. (You should turn on the display of script errors in your browser!) Here are some instructions on how to turn on JavaScript error messages.

Richland College Multimedia Learning Center

Assignment #4: Decision Making