Update User Interface for Shipping table (retrieve)

<!doctype html>
<html>
<head>
<style>
  h1 { text-align: center }
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      padding: 5px;
    }
    th {
      background-color: grey;
      color: black;
    }
  </style>
<script language="javascript">
    window.addEventListener("load", readAll)
    function readAll() {
      fetch("http://localhost:7777/retrieve4")
        .then(response => response.json())
        .then(function(data) {
          let table = '<table><thead><tr><th>PO Number</th><th>Address</th><th>POC</th><th>Phone Number</th><th>Weight</th><th>Description</th><th>Ship Company</th></tr></thead><tbody>';
          data.forEach(row => table += `<tr><td>${row.po_number}</td><td>${row.address}</td><td>${row.point_of_contact}</td><td>${row.phone_number}</td><td>${row.weight}</td><td>${row.desc}</td><td>${row.ship_company}</td></tr>`);
          table += '</tbody></table>';
          document.getElementById("records").innerHTML = table;
          // Add back button event listener
          var backButton = document.getElementById("backButton");
            backButton.addEventListener("click", function() {
                window.history.back();
        });
    })
    }
  </script>
</head>
<body style="background-color:slategrey;">
    <h1 style="font-family:lato;">Inventory Shipping</h1>
    <button id="backButton">Back</button>
    <div id="updateList"></div>
<body style="background-color:slategrey;">
  <div id="records"></div>
</body>
</html>
javywithawhy / MGMT-460

Update User Interface for Shipping table (retrieve) #22
