1 files changed, 30 insertions, 6 deletions
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>