Stock market Symbol List price with Javascript.

Stock market Symbol List price with Javascript.

by Financial Modeling Prep

HTML

<div class="stock-name"></div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
  margin: 0;
}

.table {
  width: 100%;
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 13px Arial, sans-serif;
  width: 100%;
}

.table thead th {
  background-color: #f1efb8;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  padding: 10px;
  text-align: center;
  text-shadow: 1px 1px 1px #fff;
}

.table tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
  min-width: 80px;
  text-align: center;
}

/* .stock-name {
  padding: 10px;
} */

JavaScript

document.addEventListener('DOMContentLoaded', () => {
   // https://financialmodelingprep.com/developer/docs
   getRequest(
     'https://financialmodelingprep.com/api/v3/quote-short/AAPL?apikey=demo',
     drawOutput
   );

   function drawOutput(responseText) {
   
     let resp = JSON.parse(responseText);

     let $table = document.createElement("table");
     $table.className += " table";

     var elements = document.querySelectorAll('.stock-name')[0];

     let $head = document.createElement("thead");
     let $body = document.createElement("tbody");

     let $lineHader = document.createElement("tr");

     for (let i = 0; i < resp.length; i++) {
       let financial = resp[i];
       let $line = document.createElement("tr");


       for (var key in financial) {
         if (i === 0 && financial.hasOwnProperty(key)) {
           let $ele = document.createElement("th");
           $ele.textContent = key;
           $lineHader.appendChild($ele);
         }
       }

       $head.appendChild($lineHader);
       $table.appendChild($head);

       for (var key2 in financial) {
         if (financial.hasOwnProperty(key2)) {
           let $eletd = document.createElement("td");
           $eletd.textContent = financial[key2];
           $line.appendChild($eletd);
         }
       }
       $body.appendChild($line)

       $table.appendChild($body);

     }

     document.body.appendChild($table);
   }

   function getRequest(url, success) {
     var req = false;
     try {
       req = new XMLHttpRequest();
     } catch (e) {
       try {
         req = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {
         try {
           req = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
           return false;
         }
       }
     }
     if (!req) return false;
     if (typeof success != 'function') success = function() {};
     req.onreadystatechange = function() {
       if (req.readyState == 4) {
         if (req.status === 200) {
     ...