08 Front-end 2 - Javascript, chamadas assíncronas e Redes

Autoestudo	Link
O que é e como funciona a Fetch API	Click
Requisições assíncronas com Controllers	Click
Fundamentos de redes de computadores - protocolos de rede	Click
Internet Protocol IP	Click
Formulários e rotas	Click

Descrição

Parte 1: Listando Usuários com HTML e JavaScript Puro

1. Estrutura básica do HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Lista de Usuários - JSONPlaceholder</title>
</head>
<body>
  <h1>Usuários</h1>
  <ul id="user-list"></ul>

  <script>
    // Aqui vai o código JavaScript
    fetch('<https://jsonplaceholder.typicode.com/users>')
      .then(response => response.json())
      .then(users => {
        const ul = document.getElementById('user-list');
        users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = user.name + ' (' + user.email + ')';
          ul.appendChild(li);
        });
      })
      .catch(error => {
        alert('Erro ao carregar usuários!');
        console.error(error);
      });
  </script>
</body>
</html>

O que acontece aqui?

O JavaScript faz uma requisição GET para a API.
Para cada usuário retornado, cria um <li> com nome e email.
O resultado aparece na página, sem frameworks.

Parte 2: Exibindo Detalhes ao Clicar em um Usuário

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Detalhes do Usuário - JSONPlaceholder</title>
</head>
<body>
  <h1>Usuários</h1>
  <ul id="user-list"></ul>
  <div id="user-details"></div>

  <script>
    fetch('<https://jsonplaceholder.typicode.com/users>')
      .then(response => response.json())
      .then(users => {
        const ul = document.getElementById('user-list');
        users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = user.name;
          li.style.cursor = 'pointer';
          li.onclick = () => {
            document.getElementById('user-details').innerHTML =
              `<h2>${user.name}</h2>
               <p>Email: ${user.email}</p>
               <p>Endereço: ${user.address.street}, ${user.address.city}</p>
               <p>Empresa: ${user.company.name}</p>`;
          };
          ul.appendChild(li);
        });
      });
  </script>
</body>
</html>

Agora, ao clicar em um nome, detalhes aparecem abaixo.

Parte 3: Visual Incrementado com Bootstrap

Adicione o Bootstrap no <head>:

<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">

HTML Final com Bootstrap:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Usuários - JSONPlaceholder</title>
  <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">
</head>
<body class="bg-light">
  <div class="container py-5">
    <h1 class="mb-4">Usuários</h1>
    <ul id="user-list" class="list-group mb-4"></ul>
    <div id="user-details" class="card p-3"></div>
  </div>

  <script>
    fetch('<https://jsonplaceholder.typicode.com/users>')
      .then(response => response.json())
      .then(users => {
        const ul = document.getElementById('user-list');
        users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = user.name;
          li.className = 'list-group-item list-group-item-action';
          li.style.cursor = 'pointer';
          li.onclick = () => {
            document.getElementById('user-details').innerHTML =
              `<h2 class="h4">${user.name}</h2>
               <p><strong>Email:</strong> ${user.email}</p>
               <p><strong>Endereço:</strong> ${user.address.street}, ${user.address.city}</p>
               <p><strong>Empresa:</strong> ${user.company.name}</p>`;
          };
          ul.appendChild(li);
        });
      });
  </script>
</body>
</html>