4. Students

function students() {
    const baseUrl = 'https://baas.kinvey.com/';
    const appKey = 'kid_BJXTsSi-e';
    const collection = 'students';
    const username = 'guest';
    const password = 'guest';
    const headers = {
        'Authorization': `Basic ${btoa(username + ':' + password)}`,
    };

    let div = $('<div id="buttons">');
    let addBtn = $('<button id="addButton">Add Student</button>');
    let showBtn = $('<button id="showButton">Show Students</button>');
    div.append('<br>', addBtn, showBtn);
    div.appendTo($('body'));

    showBtn.on('click', showStudents);
    addBtn.on('click', addStudent);

    async function showStudents() {
        try {
            let studentsList = await $.ajax({
                headers,
                url: baseUrl + 'appdata/' + appKey + '/' + collection,
                method: 'GET'
            });

            let sortedList = studentsList.sort((a, b) => a.ID - b.ID);

            sortedList.forEach((student) => {
                let newRow = $(`<tr>
                    <th>${student.ID}</th>
                    <th>${student.FirstName}</th>
                    <th>${student.LastName}</th>
                    <th>${student.FacultyNumber}</th>
                    <th>${student.Grade}</th>
                    </tr>`);
                newRow.appendTo($('#results'))
            })

        } catch (err) {
            console.log(err);
        }
    }
    function addStudent() {

        let inputRow = $(`<tr>
                    <th><input id="ID" type="text" placeholder="Enter ID"></th>
                    <th><input id="firstName" type="text" placeholder="First Name"></th>
                    <th><input id="lastName" type="text" placeholder="Last Name"></th>
                    <th><input id="number" type="text" placeholder="Faculty Number"></th>
                    <th><input id="grade" type="text" placeholder="Grade"></th>
                    <th><button id="add">Add</button></th>
                    </tr>`);
        inputRow.appendTo($('#buttons'));

        $('#add').on('click', add);

        async function add() {

            let studentObj = {
                ID: +$('#ID').val(),
                FirstName: $('#firstName').val(),
                LastName: $('#lastName').val(),
                FacultyNumber: $('#number').val(),
                Grade: +$('#grade').val()
            };

            try {
                await $.ajax({
                    headers,
                    url: baseUrl + 'appdata/' + appKey + '/' + collection,
                    method: 'POST',
                    data: JSON.stringify(studentObj)
                });

                showStudents();

            } catch (err) {
                console.log(err);
            }
        }
    }
}