alexpeevk9

Students - Softuni JS

Apr 20th, 2022
1,070
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const tbody = document.querySelector("tbody");
  2.  
  3. const setRow = (firstName, lastName, facultyNumber, grade) => {
  4.   tbody.insertAdjacentHTML(
  5.     "beforeend",
  6.     `
  7.             <tr>
  8.                 <td>${firstName}</td>
  9.                 <td>${lastName}</td>
  10.                 <td>${facultyNumber}</td>
  11.                 <td>${grade}</td>
  12.             </tr>`
  13.   );
  14. };
  15.  
  16. const createStudent = (event) => {
  17.   event.preventDefault();
  18.   let [firstName, lastName, facultyNumber, grade] = [
  19.     ...document.querySelectorAll("input"),
  20.   ].map((el) => el.value);
  21.  
  22.   grade = Number(grade);
  23.  
  24.   if (
  25.     firstName == "" ||
  26.     lastName == "" ||
  27.     facultyNumber == "" ||
  28.     grade == "" ||
  29.     !/^[\d]+$/.test(facultyNumber) ||
  30.     isNaN(grade)
  31.   ) {
  32.     console.log("Invalid field or fields!");
  33.     alert(`Invalid field or fields!\n
  34.                First Name, Last Name: non empty string\n
  35.                Faculty Number: string of numbers\n
  36.                Grade: number\n`);
  37.     return;
  38.   }
  39.  
  40.   grade = grade.toFixed(2);
  41.  
  42.   setRow(firstName, lastName, facultyNumber, grade);
  43.  
  44.   sendStudent({ firstName, lastName, facultyNumber, grade });
  45.  
  46.   form.reset();
  47. };
  48.  
  49. const sendStudent = async (student) => {
  50.   const response = await fetch(
  51.     "http://localhost:3030/jsonstore/collections/students",
  52.     {
  53.       method: "post",
  54.       headers: {
  55.         "Content-Type": "application/json",
  56.       },
  57.       body: JSON.stringify(student),
  58.     }
  59.   );
  60.   const data = await response.json();
  61.   return data;
  62. };
  63.  
  64. const getAllStudents = async () => {
  65.   const url = "http://localhost:3030/jsonstore/collections/students";
  66.  
  67.   const response = await fetch(url);
  68.   const data = await response.json();
  69.  
  70.   Object.values(data).forEach((s) => {
  71.     setRow(s.firstName, s.lastName, s.facultyNumber, s.grade);
  72.   });
  73. };
  74.  
  75. getAllStudents();
  76. form.addEventListener("submit", createStudent);
  77.  
Advertisement
Add Comment
Please, Sign In to add comment