pylenie_html

<!DOCTYPE html>
<html>
<head>
    <title>Plant Data Table</title>
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
            margin: auto;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Plant Name</th>
                <th>Value</th>
            </tr>
        </thead>
        <tbody id="plant-table-body">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2" style="text-align: right;">Date: <span id="current-date"></span></td>
            </tr>
        </tfoot>
    </table>

    <script>
        fetch('pylenie.json')
            .then(response => response.json())
            .then(plantData => {
                const plantTableBody = document.getElementById("plant-table-body");

                for (const plantName in plantData) {
                    const plantValue = plantData[plantName];

                    const row = document.createElement("tr");
                    const nameCell = document.createElement("td");
                    const valueCell = document.createElement("td");

                    nameCell.innerText = plantName;
                    valueCell.innerText = plantValue;

                    row.appendChild(nameCell);
                    row.appendChild(valueCell);
                    plantTableBody.appendChild(row);
                }

                const currentDate = new Date();
                const currentDateElement = document.getElementById("current-date");
                currentDateElement.innerText = currentDate.toLocaleDateString();
            })
            .catch(error => console.error(error));
    </script>
</body>
</html>