Input Waybill Number Track Package

var _table_ = document.createElement('table'), _tr_ = document.createElement('tr'), _th_ = document.createElement('th'), _td_ = document.createElement('td'); // Builds the HTML Table out of myList json data from Ivy restful service. function buildHtmlTable(arr) { const existingTable = document.getElementById("trackingTable"); if (existingTable){ existingTable.remove(); } _table_.id = 'trackingTable'; var table = _table_.cloneNode(false), columns = addAllColumnHeaders(arr, table); for (var i = 0, maxi = arr.length; i < maxi; ++i) { var tr = _tr_.cloneNode(false); for (var j = 0, maxj = columns.length; j < maxj; ++j) { var td = _td_.cloneNode(false); cellValue = arr[i][columns[j]]; td.appendChild(document.createTextNode(arr[i][columns[j]] || '')); tr.appendChild(td); } table.appendChild(tr); } return table; } // Adds a header row to the table and returns the set of columns. // Need to do union of keys from all records as some records may not contain // all records function addAllColumnHeaders(arr, table) { var columnSet = [], tr = _tr_.cloneNode(false); for (var i = 0, l = arr.length; i { if (response.status >= 400 && response.status { window.console.log(JSON.stringify(result)); var referenceNode = document.querySelector('#form'); toggleLoaderVisibility(false) referenceNode.after(buildHtmlTable(result.status)); // document.body.appendChild(); }) .catch((error) => { window.console.log(error) toggleLoaderVisibility(false) window.alert('Package not found') }); } const form = document.getElementById('form'); const log = document.getElementById('log'); function toggleLoaderVisibility(display) { const x = document.getElementById("loadingDiv"); if (display) { x.style.display = "block"; } else { x.style.display = "none"; } } form.addEventListener('submit', logSubmit); table { margin-top: 50px; width: 70%; margin-left: auto; margin-right: auto; } table, th, td { border: 1px solid black; text-align: center; } .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 60px; height: 60px; animation: spin 2s linear infinite; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }