1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Pokémon Ditto</ title >
7+ < link href ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css " rel ="stylesheet " integrity ="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9 " crossorigin ="anonymous ">
8+ </ head >
9+ < body >
10+ < div class ="accordion " id ="accordion ">
11+ < div class ="accordion-item ">
12+ < h2 class ="accordion-header ">
13+ < button class ="accordion-button " type ="button " data-bs-toggle ="collapse " data-bs-target ="#collapseOne " aria-expanded ="true " aria-controls ="collapseOne ">
14+ < li > Ditto< span id ="nome "> </ span > </ li >
15+ </ button >
16+ </ h2 >
17+ < div id ="collapseOne " class ="accordion-collapse collapse show " data-bs-parent ="#accordionExample ">
18+ < div class ="accordion-body ">
19+ < li > Nome: < span id ="nome "> </ span > </ li >
20+ < li > ID: < span id ="id "> </ span > </ li >
21+ < li > Altura: < span id ="altura "> </ span > </ li >
22+ < li > Peso: < span id ="peso "> </ span > </ li >
23+ </ div >
24+ </ div >
25+ </ div >
26+ </ div >
27+ < h1 > Informações sobre Ditto</ h1 >
28+
29+ < script >
30+ // URL da API para o Pokémon Ditto
31+ const apiUrl = 'https://pokeapi.co/api/v2/pokemon/ditto' ;
32+
33+ // Função para fazer a solicitação à API e atualizar a página
34+ async function fetchPokemonData ( ) {
35+ try {
36+ const response = await fetch ( apiUrl ) ;
37+ const data = await response . json ( ) ;
38+
39+ // Atualize os elementos HTML com os dados obtidos
40+ document . getElementById ( 'nome' ) . textContent = data . name ;
41+ document . getElementById ( 'id' ) . textContent = data . id ;
42+ document . getElementById ( 'altura' ) . textContent = data . height ;
43+ document . getElementById ( 'peso' ) . textContent = data . weight ;
44+ // Adicione outros campos conforme necessário
45+ } catch ( error ) {
46+ console . error ( 'Erro ao buscar dados da API:' , error ) ;
47+ }
48+ }
49+
50+ // Chame a função para buscar e exibir os dados do Pokémon Ditto
51+ fetchPokemonData ( ) ;
52+ </ script >
53+ </ body >
54+ </ html >
0 commit comments