Start Extra credit

2 files changed, 40 insertions, 19 deletions

diff --git a/csci4131/hw5/strap012_hw5/client/contacts.html b/csci4131/hw5/strap012_hw5/client/contacts.html
index 2e4bf65..15e4032 100755
--- a/csci4131/hw5/strap012_hw5/client/contacts.html
+++ b/csci4131/hw5/strap012_hw5/client/contacts.html
@@ -23,19 +23,16 @@
             var contacts = a.contacts;

             for (let i = 0; i < contacts.length; i++) {

               var contact = contacts[i];

-              var row = table.insertRow(-1);

-              var nam = row.insertCell(0);

-              nam.innerHTML = contact.name;

-              var cat = row.insertCell(1);

-              cat.innerHTML = contact.category;

-              var loc = row.insertCell(2);

-              loc.innerHTML = contact.location;

-              var con = row.insertCell(3);

-              con.innerHTML = contact.contact;

-              var ema = row.insertCell(4);

-              ema.innerHTML = contact.email;

-              var url = row.insertCell(5);

-              url.innerHTML = "<a href =" + contact.website_url + ">" + contact.website_url + "</a>";

+              var row = table.insertRow();

+              for (var j in contact) {

+                if (j != "website_url") {

+                  var value = row.insertCell();

+                  value.innerHTML = contact[j];

+                } else {

+                  var url = row.insertCell();

+                  url.innerHTML = "<a href =" + contact[j] + ">" + contact[j] + "</a>";

+                }

+              }

             }

           }

 

diff --git a/csci4131/hw5/strap012_hw5/client/stock.html b/csci4131/hw5/strap012_hw5/client/stock.html
index 91f8493..b55ffcb 100755
--- a/csci4131/hw5/strap012_hw5/client/stock.html
+++ b/csci4131/hw5/strap012_hw5/client/stock.html
@@ -7,6 +7,9 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

   <style>

+      pre {

+        max-height: 12em;

+      }

       textarea {

           width: 100%;

           min-height: 30rem;

@@ -47,7 +50,7 @@
               <td class="col-md-6">Company</td>

               <td class="col-md-6">

                 <div class="form-group">

-                  <select name="Company">

+                  <select id="Company" name="Company">

                     <option value="GME">Gamestop</option>

                     <option value="MSFT">Microsoft</option>

                     <option value="BA">Boeing Company</option>

@@ -60,7 +63,7 @@
             </tr>

             <tr>

               <td colspan="2">

-                <button type="button">Get Data</button>

+                <button type="button" onclick="Click()">Get Data</button>

               </td>

             </tr>

           </tbody>

@@ -77,15 +80,36 @@
     <table class="table" id="StockData">

       <thead>

         <tr>

-          <th scope="col">Company-MetaData</th>

-          <th scope="col">Stock-Info</th>

+          <th scope="col" id="meta">Company-MetaData</th>

+          <th scope="col" id="Time">Stock-Info</th>

         </tr>

       </thead>

+      <pre>

       <tbody></tbody>

+      </pre>

     </table>

   </div>

 

-  <!-- <script>

+  <script>

+    function Click() {

+      var comp = document.getElementById("Company").value;

+      var xmlhttp = new XMLHttpRequest();

+      var url = "https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=" + comp + "&apikey=8MWSNPDWKH0BTBH2";

+      xmlhttp.onreadystatechange = function () {

+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

+          var parse = JSON.parse(xmlhttp.responseText);

+          var table = document.getElementById("StockData").getElementsByTagName("tbody")[0];

+          var row = table.insertRow();

+          for (var i in parse) {

+            var cell = row.insertCell();

+            cell.innerHTML = "<pre>" + JSON.stringify(parse[i], undefined, 2) + "</pre>";

+          }

+        }

+      }

+      xmlhttp.open("GET", url, true);

+      xmlhttp.send();

+

+    }

    /* TODO:

    /    Bonus 1. Request the TIME_SERIES_DAILY endpoint of alphavantage API

    /             for the company selected in the dropdown. Display the JSON

@@ -94,6 +118,6 @@
    /             line chart using Chart.js to the chartContainer div. Ensure

    /             the chart meets all requirements from the HW writeup.

    /*/

-  </script> -->

+  </script>

 </body>

 </html>