scripts.js

// All access to DOM needs to be assigned to a const variable
//TODO: Actualizar para que tambien se guarde el progress
//TODO: Falta hacer lo mismo para las clases
//TODO: Reemplazar el let por el const en los document.getElementBy
//TODO: Aplicar camelCase a las variables
//TODO: Organizar un poco mejor el codigo

// Getting all DOM Elements
const newStudent = document.getElementById('myNewStudent');

// Getting the button to the form
const addNewStudent = document.getElementById('addNewStudent');

// Getting the X that closes form
const span = document.getElementsByClassName('close')[0];

// When Submit it's clicked
const submitNew = document.getElementById('submitNew');

// Value from form Name
const inputName = document.getElementById('inputName');

// Value from form email
const inputEmail = document.getElementById('inputEmail');

// Function for the button
addNewStudent.onclick = function () {
  newStudent.style.display = 'block';
};

//Funtion for the X
span.onclick = function () {
  newStudent.style.display = 'none';
};

// To close window
window.onclick = function (event) {
  if (event.target == newStudent) {
    newStudent.style.display = 'none';
  }
};

submitNew.onclick = function () {
  fetch('http://localhost:3000/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: inputName.value,
      email: inputEmail.value,
    }),
  })
    .then((r) => {
      newStudent.style.display = 'none';
      alert('Student Created successfuly');
      window.location.replace(window.location.href);
    })
    .catch(() => {
      alert('Oh no! :( something went wrong');
    });
};

// fetch to access the data
fetch('http://localhost:3000/users', {})
  .then((response) => response.json())
  .then((data) => {
    //Loop to get all IDS
    for (let i = 0; i < data.length; i++) {
      const studentId = data[i].id;
      const elementname = data[i].name;
      const elementemail = data[i].email;
      const elementprogress = data[i].progress;

      console.log(studentId);

      // Creating the p tag for the text
      let dataid = document.createElement('p');
      dataid.innerText = studentId;

      let divId = document.getElementById('info');

      // Adding it to the corresponding div
      divId.appendChild(dataid);

      // Creating the p tag for the text
      let datanames = document.createElement('p');
      datanames.innerText = elementname;

      let divnames = document.getElementById('names');

      // Adding it to the corresponding div
      divnames.appendChild(datanames);

      // Creating the p tag for the text
      let dataprogr = document.createElement('p');
      dataprogr.innerText = elementprogress;

      let divprogr = document.getElementById('progresses');

      // Adding it to the corresponding div
      divprogr.appendChild(dataprogr);

      let divbutton = document.createElement('div');

      // Creating button EDIT
      let editButton = document.createElement('button');
      editButton.innerText = 'E';
      editButton.id = studentId;
      editButton.setAttribute('studentName', elementname);
      editButton.setAttribute('studentEmail', elementemail);

      // Getting the div
      let student = document.getElementById('myStudent');

      // Getting the X that closes form
      let span2 = document.getElementsByClassName('close2')[0];

      //Funtion for the X
      span2.onclick = function () {
        student.style.display = 'none';
      };

      //Action when click E
      editButton.onclick = function () {
        // showing EDIT student info
        student.style.display = 'block';

        //showing name from the data.json --NO FUNCIONA
        let inputName2 = document.getElementById('inputName2');
        inputName2.value = editButton.getAttribute('studentName');

        let inputEmail2 = document.getElementById('inputEmail2');
        inputEmail2.value = editButton.getAttribute('studentEmail');

        // When submitChanges is clicked
        let submitChanges = document.getElementById('submitChanges');

        submitChanges.onclick = function () {
          fetch('http://localhost:3000/users/' + editButton.id, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              name: inputName2.value,
              email: inputEmail2.value,
            }),
          })
            .then((r) => {
              student.style.display = 'none';
              alert('Student Edited successfuly');
              window.location.replace(window.location.href);
            })
            .catch(() => {
              alert('Oh no! :( something went wrong');
            });
        };
      };

      // To close window
      window.onclick = function (event) {
        if (event.target == student) {
          student.style.display = 'none';
        }
      };

      // Adding it to the corresponding div - SHOWING UNDEFINED - ASK S
      divprogr.appendChild(dataprogr);

      // Creating button DELETE
      let deleteButton = document.createElement('button');
      deleteButton.innerText = 'D';

      let actions = document.getElementById('actions');

      actions.appendChild(divbutton);
      divbutton.appendChild(editButton);
      divbutton.appendChild(deleteButton);

      // Getting the first DIV
      let alertDelete = document.getElementById('alertDelete');

      // Getting the X that closes the alert
      let close3 = document.getElementsByClassName('close3')[0];

      // Function to close alert
      close3.onclick = function () {
        alertDelete.style.display = 'none';
      };

      // When clicked D
      deleteButton.onclick = function () {
        alertDelete.style.display = 'block';

        //Question -- PREGUNTAR S -- DESDE EL SEGUNDO D EMPIEZA A SUMAR LOS NOMRBES

        let textoAlerta = document.createElement('h4');
        textoAlerta.innerText =
          'Estas seguro que deseas eliminar ' + elementname + '?';

        let divAlert = document.getElementById('questionAlert');

        divAlert.appendChild(textoAlerta);

        //function when Yes

        //Getting YES button

        let deleteButton = document.getElementById('deleteButton');

        // When YES is clicked
        deleteButton.onclick = function () {
          console.log(editButton.id);
          fetch('http://localhost:3000/users/' + editButton.id, {
            method: 'DELETE',
            headers: {
              'Content-Type': 'application/json',
            },
            body: '',
          })
            .then((r) => {
              alertDelete.style.display = 'none';
              alert('Student Removed successfuly');
              window.location.replace(window.location.href);
            })
            .catch(() => {
              alert('Oh no! :( something went wrong');
            });
        };
        //Getting NO button
        const cancelButton = document.getElementById('cancelButton');

        // When NO is clicked
        cancelButton.onclick = function () {
          alertDelete.style.display = 'none';
        };
      };
    }
  });