.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>