{"size": 1432, "ext": "js", "max_stars_repo_path": "Aula19/sincrona/MesaDeTrabalho/js/script.js", "max_stars_repo_name": "alexandrecpedro/Front-End-II", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "Aula19/sincrona/MesaDeTrabalho/js/script.js", "max_issues_repo_name": "alexandrecpedro/Front-End-II", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "Aula19/sincrona/MesaDeTrabalho/js/script.js", "max_forks_repo_name": "alexandrecpedro/Front-End-II", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.1228070175, "max_line_length": 69, "alphanum_fraction": 0.5768156425}
const url = "https://jsonplaceholder.typicode.com/users";

const getUsers = async () => {
    const users = await fetch(url).then((res) => res.json());

    users.map((user) => {
        createUserOnHTML(user);
    });
};
getUsers();

const handleSubmit = async (event) => {
    event.preventDefault();
    const name = document.getElementById("name").value;
    const username = document.getElementById("username").value;

    const user = {
        name,
        username,
    };

    const postUser = await fetch(url, {
        method: "POST",
        body: JSON.stringify(user),
        headers: {
            "Content-Type": "application/json",
        },
    }).then((res) => res.json());

    createUserOnHTML(postUser);
};

const handleDeleteUser = async (id) => {
    // const deleteUser = await fetch(`${url}/${id}`, {
    //   method: "DELETE",
    //   headers: {
    //     "Content-Type": "application/json",
    //   },
    // }).then((res) => res.json());
    const user = document.getElementById(id);
    user.remove();
};

const createUserOnHTML = (user) => {
    const ul = document.querySelector("ul");

    const userHTML = document.createElement("li");
    userHTML.setAttribute("id", user.id);
    userHTML.setAttribute("onclick", `handleDeleteUser(${user.id})`);
    userHTML.innerHTML = `
    <h2>${user.id}</h2>
    <h3>${user.name}</h3>
    <h4>${user.username}</h4>
  `;

    ul.appendChild(userHTML);
};