function attachEvents() {
    let submitBtn = document.getElementById("submitBtn");
    let form = document.getElementById("inputForm");
    let studentsTable=document.getElementById("results")

   function getAllStudents(){
    let myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");      
    
    var requestOptions = {
      method: 'GET',
      headers: myHeaders, 
      redirect: 'follow'
    };
    
    fetch("http://localhost:3030/jsonstore/collections/students", requestOptions)
      .then(response => response.json())
      .then(result => renderTable(result))
      .catch(error => console.log('error', error))
   }

    form.addEventListener("submit", function (e) {
        e.preventDefault();
        let formData = new FormData(form)

        submitStudent(formData)
    })

    function submitStudent(formData) {
     
        //store fields with invalid input
        let invalidFields=[];

        let firstName = formData.get("firstName");
        let lastName = formData.get("lastName");

        //validate

        let textRegExp=/^[a-zA-Z]+$/;

        if (!textRegExp.test(firstName)){
          invalidFields.push("First name");
        }

        if (!textRegExp.test(lastName)){
            invalidFields.push("First name");
        }
     
        let facultyNumber = formData.get("facultyNumber");
        let facNumRegExp=/^[0-9]+$/;
        if (!facNumRegExp.test(facultyNumber)){            
         invalidFields.push("Faculty number")
        }

        let gr = formData.get("grade");
        let grade=Number(gr);
        if (!grade||isNaN(grade)){
            invalidFields.push("Grade");
        }

        //alert invalid fields
        if (invalidFields.length>0){
            alert(`The following fields contain invalid input: ${invalidFields.join(", ")}`)
        } else {

        let stObj = {
            firstName,
            lastName,
            facultyNumber,
            grade
        }
    
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        var raw = JSON.stringify(stObj);

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        fetch("http://localhost:3030/jsonstore/collections/students", requestOptions)
            .then(response => response.json())
            .then(result => getAllStudents())
            .catch(error => console.log('error', error));
    }
}

    function renderTable(data){
        studentsTable.innerHTML="";
        let dataArr=Object.values(data);
        dataArr.forEach(student => {
            let newTr=document.createElement("tr");
            let fnTh=document.createElement("th");
            fnTh.textContent=student.firstName;
            let lnTh=document.createElement("th");
            lnTh.textContent=student.lastName;
            let facNth=document.createElement("th");
            facNth.textContent=student.facultyNumber;
            let gradeTh=document.createElement("th");
            gradeTh.textContent=student.grade;

            newTr.appendChild(fnTh);
            newTr.appendChild(lnTh);
            newTr.appendChild(facNth);
            newTr.appendChild(gradeTh);

            studentsTable.appendChild(newTr);
            form.reset();
        });
    }
  

getAllStudents()
}
attachEvents()