%%html
<html>
<head>
<!-- Load jQuery and DataTables styles and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="coffeeTable" class="table" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Ingredients</th>
<th>Image</th>
</tr>
</thead>
<tbody id="coffeeBody"></tbody>
</table>
<script>
$(document).ready(function() {
fetch('https://api.sampleapis.com/coffee/hot', { mode: 'cors' })
.then(response => {
if (!response.ok) {
throw new Error('API response failed');
}
return response.json();
})
.then(data => {
for (const coffee of data) {
// Populate the table with coffee data
$('#coffeeBody').append('<tr><td>' +
coffee.title + '</td><td>' +
coffee.description + '</td><td>' +
coffee.ingredients.join(', ') + '</td><td>' +
'<img src="' + coffee.image + '" alt="' + coffee.title + '" height="100"></td></tr>');
}
// Initialize DataTables for the table
$("#coffeeTable").DataTable();
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>