JavaScript/hw5part3.html at master · marbleindex/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
   <head>
      <!--Kristian Reyes 10/23/2020 -->
      <title>CNIT 133 Homework 5</title>
      <meta charset="utf-8">
      <meta name="description" content="homework 5 for CCSF CNIT 133">
      <meta name="keywords" content="HTML, CSS, Javascript, CCSF, Student">
      <meta name="author" content="Kristian Reyes">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--bootstrap   -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <!--bootstrap   -->
      <script>
         // state data array
         var statesArray =
                    [ ["AL", "Alabama", "Montgomery", "4,887,871"],
                      ["AK", "Alaska", "Juneau", "737,438"],
                      ["AZ", "Arizona", "Phoenix", "7,171,646"],
                      ["AR", "Arkansas", "Little Rock", "3,010,825"],
                      ["CA", "California", "Sacramento",  "39,557,045"],
                      ["CO", "Colorado", "Denver", "5,694,564"] ];

         function InputValidate()   //validation function
         {
          var searchKey = document.forms["InputForm"].elements["inputState"].value;  //get searchkey from form input box

          var locatedkey = false;    //indicates if a match was found
          for (var row = 0; row < statesArray.length; row++) // loop through index
           {
           if (((statesArray[row][0] == searchKey)  || (statesArray[row][1] == searchKey)) || ((statesArray[row][0] == searchKey.toUpperCase())  || (statesArray[row][1].toLowerCase()) == searchKey.toLowerCase()))

                       //check if searchkey equals the state initial or name
           {

                      //if search key matches a state initial or name, the array data is place in the textarea.

             document.forms["InputForm"].elements["statedata"].value =

         "State abbr = " + statesArray[row][0] +"\n" + "State Name = " + statesArray[row][1] +"\n" + "Capital = " + statesArray[row][2] + "\n"  + "Population = " + statesArray[row][3];


             row = statesArray.length;   //ends loop if match found
             locatedkey = true;
           }
          }

         if ( locatedkey == false ) {
         document.forms["InputForm"].elements["comment"].value= "State not found!";
         //error message if the input doesn't have a match

             }

         }
      </script>
   </head>
   <body>
      <main class="grid">
         <header  class="grid-area grid-area-1">
            <h2> Homework 5 - Part 3 </h2>
         </header>
         <nav class="grid-area grid-area-2">
            <ul>
               <li>
                  <a href="homework5.html" title="CNIT 133 - HW 5 ">
                  Return to CNIT 133 Homework 5 - Arrays
                  </a>
               </li>
            </ul>
         </nav>
         <section class="grid-area grid-area-3">
            <h2> States Data</h2>
            <p>
               Please type in one of the following states to retrieve data for:
            </p>
            <ul>
               <li>AL (Alabama)</li>
               <li>AK (Alaska)</li>
               <li>AZ (Arizona)</li>
               <li>AR (Arkansas)</li>
               <li>CA (California)</li>
               <li>CO (Colorado)</li>
            </ul>
            <br>
            <form name="InputForm">
               <input type="text" name="inputState" autofocus>
               <input onclick="InputValidate();" type="button" value="State Info" name="State Info" id="search">
               <input type="reset" value="Reset" onclick="location.reload();">
               <br>
               <br>
               <label for="statedata">Thanks for your inquiry, here is the information you requested:</label>
               <br>
               <textarea id="statedata" name="statedata" rows="5" cols="50">
               </textarea>
               <br><br>
               Comment<br>
               <input type="text" name="comment" id="comment"><br><br>
            </form>
         </section>
         <footer class="grid-area grid-area-4">
            <p>
               &#169; 2020 Kristian Reyes
            </p>
         </footer>
      </main>
   </body>
</html>