Last active
December 3, 2018 04:16
-
-
Save harrisonmalone/863565859170120e4ce564f4eaae2240 to your computer and use it in GitHub Desktop.
the pokemon example that i ran through with the anz group that used fetch and then, could be a useful talk to take again in the future
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| } | |
| .pokemon-list { | |
| display: flex; | |
| flex-flow: row wrap; | |
| justify-content: center; | |
| } | |
| .box { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100%; | |
| height: 250px; | |
| } | |
| /* for tablets */ | |
| @media only screen and (min-width: 600px) { | |
| .box { | |
| width: 50%; | |
| } | |
| } | |
| /* for desktop */ | |
| @media only screen and (min-width: 768px) { | |
| .box { | |
| width: 33.33% | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| <link rel="stylesheet" href="pokemon.css"> | |
| </head> | |
| <body> | |
| <div class="pokemon-list"></div> | |
| <script src="pokemon.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const url = 'https://pokeapi.co/api/v2/pokemon/' | |
| const promise = fetch(url) | |
| const secondPromise = promise.then( | |
| function(response){ | |
| return response.json() | |
| }) | |
| const finalPromise = secondPromise.then( | |
| function(pokemon) { | |
| return printPokemon(pokemon.results) | |
| } | |
| ) | |
| console.log(finalPromise) | |
| function printPokemon(pokemon) { | |
| pokemon.forEach(function(poke, index) { | |
| const pokeName = poke.name | |
| appendName(pokeName, index) | |
| }) | |
| randomColor() | |
| } | |
| function appendName(pokeName, index, colour) { | |
| const list = document.querySelector('.pokemon-list') | |
| index = index + 1 | |
| const pokemon = ` | |
| <div class="box"> | |
| <h2>${index}</h2> | |
| <h3>${pokeName}<h3> | |
| </div> | |
| ` | |
| list.insertAdjacentHTML('beforeend', pokemon) | |
| } | |
| function randomColor() { | |
| const boxes = document.querySelectorAll('.box') | |
| boxes.forEach(function(box) { | |
| const hex = Math.floor(Math.random() * 16777215).toString(16) | |
| box.style.background = '#' + hex | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment