Web3 FullStack Students App HTML Final

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Studenti Blockchain Interface</title>
     <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Optional: Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        td, th {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>STUDENTI FRONT END</h2>
    <p>Blockchain Front End for Studenti Contract</p>

    <form id="studentForm">
        <input type="text" id="facNum" placeholder="Faculty Number" required>
        <input type="text" id="firstName" placeholder="First Name" required>
        <input type="text" id="lastName" placeholder="Last Name" required>
        <input type="text" id="age" placeholder="Age" required>
        <button type="submit">Add/Update Student</button>
    </form>

    <h3>Students Table:</h3>
    <div id="studentsTable"></div>

    <script>
        document.getElementById('studentForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const studentData = {
                _facNum: document.getElementById('facNum').value,
                _firstName: document.getElementById('firstName').value,
                _lastName: document.getElementById('lastName').value,
                _age: document.getElementById('age').value
            };

            fetch('http://127.0.0.1:5000/api/addOrUpdateStudent', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(studentData)
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                alert(data.message);
                document.getElementById('studentForm').reset();
                fetchStudents(); // Refresh the students table
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        });

        function fetchStudents() {
            fetch('http://127.0.0.1:5000/api/getStudents')
                .then(response => response.json())
                .then(data => {
                    createStudentsTable(data);
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
        }

        function createStudentsTable(data) {
    const container = document.getElementById('studentsTable');
    container.innerHTML = ''; // Clear existing content

    // Check if data is an array and has at least one element
    if (Array.isArray(data) && data.length > 0) {
        const table = document.createElement('table');
        const header = table.insertRow();

        // Use the keys of the first object in the array for headers
        const headers = Object.keys(data[0]);
        headers.forEach(headerText => {
            const headerCell = document.createElement('th');
            headerCell.textContent = headerText.charAt(0).toUpperCase() + headerText.slice(1); // Capitalize the header
            header.appendChild(headerCell);
        });

        // Add rows for each student
        data.forEach(student => {
            const tr = table.insertRow();
            headers.forEach(prop => {
                const td = tr.insertCell();
                td.textContent = student[prop];
            });
        });

        container.appendChild(table);
    } else {
        container.textContent = 'No students data available';
    }
}


        // Initial fetch of students data
        fetchStudents();
    </script>
</body>
</html>