Advertisement
EntropyStarRover

03. Students

Mar 3rd, 2021
651
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     let submitBtn = document.getElementById("submitBtn");
  3.     let form = document.getElementById("inputForm");
  4.     let studentsTable=document.getElementById("results")
  5.  
  6.    function getAllStudents(){
  7.     let myHeaders = new Headers();
  8.     myHeaders.append("Content-Type", "application/json");      
  9.    
  10.     var requestOptions = {
  11.       method: 'GET',
  12.       headers: myHeaders,
  13.       redirect: 'follow'
  14.     };
  15.    
  16.     fetch("http://localhost:3030/jsonstore/collections/students", requestOptions)
  17.       .then(response => response.json())
  18.       .then(result => renderTable(result))
  19.       .catch(error => console.log('error', error))
  20.    }
  21.  
  22.     form.addEventListener("submit", function (e) {
  23.         e.preventDefault();
  24.         let formData = new FormData(form)
  25.  
  26.         submitStudent(formData)
  27.     })
  28.  
  29.     function submitStudent(formData) {
  30.      
  31.         //store fields with invalid input
  32.         let invalidFields=[];
  33.  
  34.         let firstName = formData.get("firstName");
  35.         let lastName = formData.get("lastName");
  36.  
  37.         //validate
  38.  
  39.         let textRegExp=/^[a-zA-Z]+$/;
  40.  
  41.         if (!textRegExp.test(firstName)){
  42.           invalidFields.push("First name");
  43.         }
  44.  
  45.         if (!textRegExp.test(lastName)){
  46.             invalidFields.push("First name");
  47.         }
  48.      
  49.         let facultyNumber = formData.get("facultyNumber");
  50.         let facNumRegExp=/^[0-9]+$/;
  51.         if (!facNumRegExp.test(facultyNumber)){            
  52.          invalidFields.push("Faculty number")
  53.         }
  54.  
  55.         let gr = formData.get("grade");
  56.         let grade=Number(gr);
  57.         if (!grade||isNaN(grade)){
  58.             invalidFields.push("Grade");
  59.         }
  60.  
  61.         //alert invalid fields
  62.         if (invalidFields.length>0){
  63.             alert(`The following fields contain invalid input: ${invalidFields.join(", ")}`)
  64.         } else {
  65.  
  66.         let stObj = {
  67.             firstName,
  68.             lastName,
  69.             facultyNumber,
  70.             grade
  71.         }
  72.    
  73.         var myHeaders = new Headers();
  74.         myHeaders.append("Content-Type", "application/json");
  75.  
  76.         var raw = JSON.stringify(stObj);
  77.  
  78.         var requestOptions = {
  79.             method: 'POST',
  80.             headers: myHeaders,
  81.             body: raw,
  82.             redirect: 'follow'
  83.         };
  84.  
  85.         fetch("http://localhost:3030/jsonstore/collections/students", requestOptions)
  86.             .then(response => response.json())
  87.             .then(result => getAllStudents())
  88.             .catch(error => console.log('error', error));
  89.     }
  90. }
  91.  
  92.     function renderTable(data){
  93.         studentsTable.innerHTML="";
  94.         let dataArr=Object.values(data);
  95.         dataArr.forEach(student => {
  96.             let newTr=document.createElement("tr");
  97.             let fnTh=document.createElement("th");
  98.             fnTh.textContent=student.firstName;
  99.             let lnTh=document.createElement("th");
  100.             lnTh.textContent=student.lastName;
  101.             let facNth=document.createElement("th");
  102.             facNth.textContent=student.facultyNumber;
  103.             let gradeTh=document.createElement("th");
  104.             gradeTh.textContent=student.grade;
  105.  
  106.             newTr.appendChild(fnTh);
  107.             newTr.appendChild(lnTh);
  108.             newTr.appendChild(facNth);
  109.             newTr.appendChild(gradeTh);
  110.  
  111.             studentsTable.appendChild(newTr);
  112.             form.reset();
  113.         });
  114.     }
  115.  
  116.  
  117. getAllStudents()
  118. }
  119. attachEvents()
Advertisement
RAW Paste Data Copied
Advertisement