Pesquisar apis hacker

.JSON API HACKER PESQUISE.


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Pesquisa de API hacker</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <div class="search-container">

    <input type="text" id="searchInput" placeholder="Digite sua pesquisa...">

    <button onclick="searchApi()">Pesquisar API</button>

  </div>


  <div id="apiResults">

    <!-- Aqui serão exibidos os resultados da pesquisa -->

  </div>


  <script>

  async function searchApi() {

  const searchTerm = document.getElementById('searchInput').value;

  const apiUrl = `https://api.example.com/search?query=${searchTerm}`;


  try {

    const response = await fetch(apiUrl);

    const data = await response.json();

    displayResults(data);

  } catch (error) {

    console.error('Erro ao buscar na API:', error);

  }

}


function displayResults(results) {

  const apiResults = document.getElementById('apiResults');

  apiResults.innerHTML = '<h2>Resultados da API:</h2>';


  results.forEach(result => {

    const resultItem = document.createElement('div');

    // Personalize isso conforme a estrutura dos dados retornados pela sua API

    resultItem.innerHTML = `<h3>${result.name}</h3>

                            <p>${result.description}</p>`;

    apiResults.appendChild(resultItem);

  });

}

  </script>

</body>

</html>