HTML page with simple table
Here is the HTML code to present the simple table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
}
.header {
text-align: center;
padding: 10px 20px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
position: relative;
}
.header img {
height: 50px;
display: block;
margin: 0 auto;
}
.header h1 {
margin: 10px 0;
color: #007bff;
font-size: 1.5em;
}
.header .button {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
.header .button:hover {
background-color: #0056b3;
}
h2, h3 {
text-align: center;
color: #007bff;
text-transform: uppercase;
margin: 0;
}
.header-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.top-left, .top-right {
text-align: left;
margin: 0;
}
.top-left p, .top-right p {
margin: 5px 0;
}
.highlight {
color: #007bff;
font-weight: bold;
}
.container {
background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
table {
width: 95%;
margin: 20px auto;
border-collapse: collapse;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #007bff;
color: white;
text-transform: uppercase;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.success {
color: green;
}
.failure {
color: red;
}
.time-difference {
color: red;
}
.key {
color: #007bff;
font-weight: bold;
}
.value {
color: #333;
font-weight: bold;
}
.summary {
text-align: center;
margin: 20px;
font-size: 1.2em;
}
.summary p {
margin: 5px 0;
}
.summary .success {
color: green;
}
.summary .failure {
color: red;
}
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
z-index: 1000;
}
.popup input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.popup button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
margin: 5px;
}
.popup button:hover {
background-color: #0056b3;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.failed-apis-section h2 {
color: red;
text-align: center;
text-transform: uppercase;
}
.single-line {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
<img src="https://w7.pngwing.com/pngs/347/920/png-transparent-the-hongkong-and-shanghai-banking-corporation-hsbc-bank-usa-business-bank-angle-text-triangle.png" alt="HSBC Logo">
<h1>
World Class Onboarding<br>
All APIs Consumed by WCO and Its Endpoints Health Checks
</h1>
<button class="button" onclick="openPopup()">Send Reports Through Email</button>
</div>
<div class="header-info container">
<div class="top-left">
<p><span class="key">QA Lead:</span> <span class="value">Chinkitta Sunil Gujarati</span></p>
<p><span class="key">QA Lead:</span> <span class="value">Siddhesh Shamsundar Kalyankar</span></p>
</div>
<div class="top-right single-line">
<p><span class="key">QA Health Check POC:</span> <span class="value">Vinoth Kumar</span></p>
<p><span class="key">Current Date and Time:</span> <span class="value" id="currentDateTime"></span></p>
</div>
</div>
<div class="summary container">
<h3>Summary</h3>
<p id="totalApis"></p>
<p id="totalTimeTaken"></p>
</div>
<table id="apiLogsTable">
<thead>
<tr>
<th>Sequence</th>
<th>HTTP Method</th>
<th>Base URL</th>
<th>Endpoints</th>
<th>Request Time</th>
<th>Time Difference</th>
<th>Response Status Code</th>
<th>Response Payload</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated here by JavaScript -->
</tbody>
</table>
<div class="failed-apis-section">
<h2>Failed APIs</h2>
<table id="failedApisTable">
<thead style="background-color: red;">
<tr>
<th>Sequence</th>
<th>HTTP Method</th>
<th>Base URL</th>
<th>Endpoints</th>
<th>Response Status Code</th>
<th>Response Payload</th>
</tr>
</thead>
<tbody>
<!-- Data will be populated here by JavaScript -->
</tbody>
</table>
</div>
<div class="overlay" id="overlay"></div>
<div class="popup" id="popup">
<h3>Enter Email Addresses</h3>
<input type="text" id="emailAddresses" placeholder="Email addresses, separated by commas">
<button onclick="sendEmails()">Ok</button>
<button onclick="closePopup()">Cancel</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const data = [
{
"sequence": 1,
"httpMethod": "GET",
"baseURL": "https://api.example.com",
"path": "/endpoint1",
"requestTime": "2024-07-11T10:00:00Z",
"responseTime": "2024-07-11T10:00:01Z",
"responseStatusCode": 200,
"responsePayload": {"message": "Success", "data": {}},
"isSuccess": true
},
{
"sequence": 2,
"httpMethod": "POST",
"baseURL": "https://api.example.com",
"path": "/endpoint2",
"requestPayload": {"param1": "value1"},
"requestTime": "2024-07-11T10:05:00Z",
"responseTime": "2024-07-11T10:05:02Z",
"responseStatusCode": 201,
"responsePayload": {"message": "Resource created", "id": 123},
"isSuccess": true
},
{
"sequence": 3,
"httpMethod": "PUT",
"baseURL": "https://api.example.com",
"path": "/endpoint3",
"requestPayload": {"param1": "newValue"},
"requestTime": "2024-07-11T10:10:00Z",
"responseTime": "2024-07-11T10:10:03Z",
"responseStatusCode": 200,
"responsePayload": {"message": "Update successful"},
"isSuccess": true
},
{
"sequence": 4,
"httpMethod": "DELETE",
"baseURL": "https://api.example.com",
"path": "/endpoint4",
"requestTime": "2024-07-11T10:15:00Z",
"responseTime": "2024-07-11T10:15:01Z",
"responseStatusCode": 204,
"responsePayload": {},
"isSuccess": true
},
{
"sequence": 5,
"httpMethod": "GET",
"baseURL": "https://api.example.com",
"path": "/endpoint5",
"requestTime": "2024-07-11T10:20:00Z",
"responseTime": "2024-07-11T10:20:01Z",
"responseStatusCode": 404,
"responsePayload": {"error": "Not found"},
"isSuccess": false
},
{
"sequence": 6,
"httpMethod": "POST",
"baseURL": "https://api.example.com",
"path": "/endpoint6",
"requestPayload": {"param2": "value2"},
"requestTime": "2024-07-11T10:25:00Z",
"responseTime": "2024-07-11T10:25:03Z",
"responseStatusCode": 400,
"responsePayload": {"error": "Bad request"},
"isSuccess": false
},
{
"sequence": 7,
"httpMethod": "GET",
"baseURL": "https://api.example.com",
"path": "/endpoint7",
"requestTime": "2024-07-11T10:30:00Z",
"responseTime": "2024-07-11T10:30:02Z",
"responseStatusCode": 500,
"responsePayload": {"error": "Internal server error"},
"isSuccess": false
},
{
"sequence": 8,
"httpMethod": "PUT",
"baseURL": "https://api.example.com",
"path": "/endpoint8",
"requestPayload": {"param3": "value3"},
"requestTime": "2024-07-11T10:35:00Z",
"responseTime": "2024-07-11T10:35:04Z",
"responseStatusCode": 401,
"responsePayload": {"error": "Unauthorized"},
"isSuccess": false
},
{
"sequence": 9,
"httpMethod": "DELETE",
"baseURL": "https://api.example.com",
"path": "/endpoint9",
"requestTime": "2024-07-11T10:40:00Z",
"responseTime": "2024-07-11T10:40:01Z",
"responseStatusCode": 403,
"responsePayload": {"error": "Forbidden"},
"isSuccess": false
},
{
"sequence": 10,
"httpMethod": "GET",
"baseURL": "https://api.example.com",
"path": "/endpoint10",
"requestTime": "2024-07-11T10:45:00Z",
"responseTime": "2024-07-11T10:45:01Z",
"responseStatusCode": 200,
"responsePayload": {"message": "Success", "data": {"id": 456}},
"isSuccess": true
}
];
const tableBody = document.getElementById('apiLogsTable').getElementsByTagName('tbody')[0];
const failedTableBody = document.getElementById('failedApisTable').getElementsByTagName('tbody')[0];
let totalTimeTaken = 0;
let successCount = 0;
let failureCount = 0;
const startDateTime = new Date(data[0].requestTime);
const endDateTime = new Date(data[data.length - 1].requestTime);
data.forEach(log => {
const requestTime = new Date(log.requestTime);
const responseTime = new Date(log.responseTime);
const timeDifference = (responseTime - requestTime) / 1000; // Convert to seconds
totalTimeTaken += timeDifference;
const row = tableBody.insertRow();
row.insertCell(0).textContent = log.sequence;
row.insertCell(1).textContent = log.httpMethod;
row.insertCell(2).textContent = log.baseURL;
row.insertCell(3).textContent = log.path;
row.insertCell(4).textContent = requestTime.toLocaleString(); // Request Time
row.insertCell(5).textContent = timeDifference + "s"; // Time Difference
row.insertCell(6).textContent = log.responseStatusCode;
row.insertCell(7).textContent = JSON.stringify(log.responsePayload);
const statusCell = row.insertCell(8);
statusCell.textContent = log.isSuccess ? "PASSED" : "FAILED";
statusCell.classList.add(log.isSuccess ? 'success' : 'failure');
if (log.isSuccess) {
successCount++;
} else {
failureCount++;
const failedRow = failedTableBody.insertRow();
failedRow.insertCell(0).textContent = log.sequence;
failedRow.insertCell(1).textContent = log.httpMethod;
failedRow.insertCell(2).textContent = log.baseURL;
failedRow.insertCell(3).textContent = log.path;
failedRow.insertCell(4).textContent = log.responseStatusCode;
failedRow.insertCell(5).textContent = JSON.stringify(log.responsePayload);
}
});
document.getElementById('totalApis').innerHTML = `Number of Passed APIs: <span class="success">${successCount}</span>, Number of Failed APIs: <span class="failure">${failureCount}</span> out of ${data.length}`;
document.getElementById('totalTimeTaken').textContent = `Total Time Taken: ${totalTimeTaken.toFixed(2)} seconds (From ${startDateTime.toLocaleString()} to ${endDateTime.toLocaleString()})`;
document.getElementById('currentDateTime').textContent = new Date().toLocaleString();
});
function openPopup() {
document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
}
function closePopup() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('popup').style.display = 'none';
}
function sendEmails() {
closePopup();
setTimeout(() => {
alert("Email sent successfully!");
}, 5000);
}
</script>
</body>
</html>
HTML page with simple table
![HTML page with simple table]()
Reviewed by Naveen
on
12:13 PM
Rating:
No comments: