Practice evaluation (Medium)

<!DOCTYPE html>
<html>
<head>
  <title> JavaScript Quiz medium </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
  <![endif]-->

  <!-- Load Bootstrap JavaScript components -->
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

  <style>
    .blue {
      background-color: blue;
    }
    .red {
      background-color: red;
    }
    .yellow {
      background-color: #ffff00;
    }
  </style>

</head>
<body>
  <div class="container">
    <div class="well">
    Write JavaScript program to validate the student's phone number.  Valid phone numbers have the format:
    <ul>
      <li>3 digit area code (optional)</li>
      <li>space or dash (optional)</li>
      <li>3 digits</li>
      <li>space or dash (optional)</li>
      <li>4 digits</li>
    </ul>
    If the phone number is invalid highlight the phone number field in red.
    </div>
    <div class="row">
      <p>
        Please enter your name and phone number:
      </p>
      <form>
        <label>Name: <input type="text" name="name"/></label><br/>
        <label>Phone number: <input type="text" name="phone_number"/></label><br/>
      </form>
      <button>Validate Phone Number</button>
    </div>
  </div>
  
  <script>
  // your code goes here.
  </script>
</body>
</html>

Send an email with the file attached to cmoore@hawaii.edu and dufek@hawaii.edu. The timestamp on the email will indicate when you completed the quiz. For a medium quiz you have 20 minutes to complete the problem.

1. Copy the following HTML template to your XAMPP htdocs directory. Name the file jsmedi.html.

2. Write a JavaScript program to validate the phone number.

3. Email me your jsmedi.html file when you are finished and have tested the code.

Watch me solving the problem