document.addEventListener("DOMContentLoaded", () => {
    // Fetch data from the API
    fetch("https://timelapse.kerboul.me/api/itemsdb")
      .then(response => response.json())
      .then(data => {
        // Get the table body element
        const tableBody = document.querySelector("#table-metrics tbody");

        // Loop through the data and create a new row for each item
        data.forEach(item => {
          const row = document.createElement("tr");

          // Create a new cell for each property (metrics, hygrometry, temperature)
          const metricsCell = document.createElement("td");
          metricsCell.textContent = item.metrics;
          row.appendChild(metricsCell);

          const hygrometryCell = document.createElement("td");
          hygrometryCell.textContent = item.hygrometry;
          row.appendChild(hygrometryCell);

          const temperatureCell = document.createElement("td");
          temperatureCell.textContent = item.temperature;
          row.appendChild(temperatureCell);

          // Append the row to the table body
          tableBody.appendChild(row);
        });
      })
      .catch(error => console.error(error));
  });