fetch.js

function register(event) {
    event.preventDefault();
    getFormData();
}

function getFormData() {
    // Get form data from registration form
    var formData = {username: 'username', password: 'password'};
    saveRegistration(formData);
}

function saveRegistration(data) {
    var options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    };

    fetch('https://reqres.in/api/users', options)
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    });
}

function updateRegistration(data) {
    var options = {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    };

    fetch('https://reqres.in/api/users?id=431', options) // becomes a promise
    .then((response) => response.json()) // .then runs when the promise is resolved
    .then((data) => {
        console.log(data);
    });

    console.log('Something something');
}

function deleteRegistration(id) {
    var options = {
        method: 'DELETE'
    };

    fetch('https://reqres.in/api/users?id=' + id, options)
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
    });
}

function createStudentCard(student) {
    var container = document.getElementsByClassName('student-list');

    // Create the card
    var card = document.createElement('div');
    card.setAttribute('class', 'student-card');
    // Insert student info
    var avatar = document.createElement('img');
    avatar.setAttribute('src', student.avatar);
    avatar.setAttribute('class', 'student-avatar');
    card.appendChild(avatar);

    // student first name
    var firstName = document.createElement('h2');
    firstName.setAttribute('class', 'first-name');
    firstName.innerText = student.first_name;
    card.appendChild(firstName);

    // student last name
    var lastName = document.createElement('h2');
    lastName.setAttribute('class', 'last-name');
    lastName.innerText = student.last_name;
    card.appendChild(lastName);

    // student email
    var email = document.createElement('a');
    email.setAttribute('class', 'email');
    email.setAttribute('href', 'mailto:' + student.email)
    email.innerText = student.email;
    card.appendChild(email);

    // Append the card to the container
    container[0].appendChild(card);
}

function getStudent() {
    fetch('https://reqres.in/api/users/2')
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
        createStudentCard(data.data);
    });
}

function collection() {
    // users
    [
        {'id': 1, 'name': 'Joe', 'email': 'joe@gmail.com', 'contactType': 'text', 'phoneNumber': 1234567890},
        {'id': 2, 'name': 'Jill', 'email': 'jill@gmail.com'},
        {'id': 3, 'name': 'Joe'},
        {'id': 4, 'name': 'Joe', 'email': 'joe@gmail.com', 'state': 'CT'},
    ]
}