Display an image of the pokemon (this property will exist somewhere on the response object returned from https://pokeapi.co/api/v2/pokemon/:id)
Use CSS or Bootstrap to add some nice styling to the pages
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <h1>On details page</h1> | |
| <script src="./details.js"></script> | |
| </body> | |
| </html> |
| const params = window.location.search | |
| const id = params.split("?")[1] | |
| fetch(`https://pokeapi.co/api/v2/pokemon/${id}`) | |
| .then((response) => { | |
| return response.json() | |
| }) | |
| .then((data) => { | |
| let con = document.querySelector('.container') | |
| let sprite = `<img src="${data.sprites.front_default}">` | |
| con.insertAdjacentHTML('beforeend', sprite); | |
| return data | |
| }) | |
| .then((data) => { | |
| let list = document.querySelector('.list') | |
| const abilities = data.abilities | |
| abilities.forEach((ability) => { | |
| let li = `<li>${ability.ability.name}</li>` | |
| list.insertAdjacentHTML('beforeend', li) | |
| }) | |
| }) |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="container"></div> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> |
| const container = document.querySelector('.container') | |
| const getPokemon = fetch('https://pokeapi.co/api/v2/pokemon/?limit=151') | |
| getPokemon | |
| .then((response) => { | |
| return response.json() | |
| }) | |
| .then((json) => { | |
| const pokemon = json.results | |
| pokemon.forEach((poke, index) => { | |
| index += 1 | |
| const paragraph = ` | |
| <a href="details.html?${index}"><p>${poke.name}</p></a> | |
| ` | |
| container.insertAdjacentHTML("beforeend", paragraph) | |
| }) | |
| }) |
| /* hello */ |