|
| 1 | +/* eslint-disable */ |
| 2 | + |
| 3 | +/* |
| 4 | + Call this function to get a JSON string of the data |
| 5 | + (simulates calling a server to retrieve data) |
| 6 | +*/ |
| 7 | +var name = window.prompt('Enter your name:'); |
| 8 | +var color = window.prompt('Choose fire, water or grass.'); |
| 9 | + |
| 10 | +function fetchPokemonData(type) { |
| 11 | + if (type == 'fire') { |
| 12 | + return `{"abilities": [{"ability": {"name": "solar-power","url": "https://pokeapi.co/api/v2/ability/94/"},"is_hidden": true,"slot": 3},{"ability": {"name": "blaze","url": "https://pokeapi.co/api/v2/ability/66/" },"is_hidden": false,"slot": 1}],"base_experience": 62,"forms": [{"name": "charmander","url": "https://pokeapi.co/api/v2/pokemon-form/4/"}], "height": 6,"held_items": [],"id": 4,"is_default": true,"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/4/encounters","order": 5,"species": {"name": "charmander", "url": "https://pokeapi.co/api/v2/pokemon-species/4/"},"sprites": {"back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/4.png","back_female": null,"back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/4.png","back_shiny_female": null,"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png","front_female": null,"front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/4.png","front_shiny_female": null}}`; |
| 13 | + } |
| 14 | + if (type == 'water') { |
| 15 | + return `{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}`; |
| 16 | + } |
| 17 | + if (type == 'grass') { |
| 18 | + return `{"abilities": [{"ability": {"name": "chlorophyll","url": "https://pokeapi.co/api/v2/ability/34/"},"is_hidden": true,"slot": 3},{"ability": {"name": "overgrow","url": "https://pokeapi.co/api/v2/ability/65/"},"is_hidden": false,"slot": 1}],"base_experience": 64,"forms": [ {"name": "bulbasaur","url": "https://pokeapi.co/api/v2/pokemon-form/1/"}],"name": "bulbasaur","order": 1,"species": {"name": "bulbasaur","url": "https://pokeapi.co/api/v2/pokemon-species/1/"},"sprites": {"back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png","back_female": null,"back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/1.png","back_shiny_female": null,"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png","front_female": null,"front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png","front_shiny_female": null},"weight": 69}`; |
| 19 | + } |
| 20 | +} |
| 21 | + |
| 22 | +function pokemonName(type) { |
| 23 | + if (type == 'fire') { |
| 24 | + return 'Charmander'; |
| 25 | + } |
| 26 | + if (type == 'water') { |
| 27 | + return 'Squirtle'; |
| 28 | + } |
| 29 | + if (type == 'grass') { |
| 30 | + return 'Bulbasaur'; |
| 31 | + } |
| 32 | +} |
| 33 | + |
| 34 | +let pokeName = pokemonName(color); |
| 35 | +/*Code goes below */ |
| 36 | + |
| 37 | +function parsemon() { |
| 38 | + let pokeProperties = JSON.parse(fetchPokemonData(color)); |
| 39 | + let justSprites = Object.keys(pokeProperties.sprites) |
| 40 | + .map(key => pokeProperties.sprites[key]) |
| 41 | + .filter(sprite => sprite); |
| 42 | + return justSprites; |
| 43 | +} |
| 44 | +let unorderedSprites = parsemon(); |
| 45 | +let sprites = unorderedSprites.reverse(); |
| 46 | + |
| 47 | +const mySpriteSpot = document.querySelector('#poke-selector'); |
| 48 | + |
| 49 | +const intro = document.createElement('div'); |
| 50 | +intro.setAttribute('class', 'oakText'); |
| 51 | +intro.innerText = `Well, well. If it isn't young ${name}. Finally ready to become a Pokemon trainer! Why it seems only yesterday you were toddling around the garden with the Butterfrees and Bellsprouts. |
| 52 | +Well it looks like you've made a great choice with your first Pokemon. I'm sure this ${pokeName} will serve you well.`; |
| 53 | +mySpriteSpot.appendChild(intro); |
| 54 | + |
| 55 | +const div = document.createElement('div'); |
| 56 | +div.setAttribute('class', 'wrapper'); |
| 57 | + |
| 58 | +for (sprite in sprites) { |
| 59 | + const eachSpriteDiv = document.createElement('div'); |
| 60 | + eachSpriteDiv.id = sprite; |
| 61 | + eachSpriteDiv.setAttribute('class', 'box'); |
| 62 | + |
| 63 | + // const name = document.createElement('h4'); |
| 64 | + // name.innerText = `This is sprite ${sprite}`; |
| 65 | + // eachSpriteDiv.appendChild(name); |
| 66 | + // console.log(name); |
| 67 | + |
| 68 | + const picture = document.createElement('IMG'); |
| 69 | + picture.src = sprites[sprite]; |
| 70 | + eachSpriteDiv.appendChild(picture); |
| 71 | + |
| 72 | + div.appendChild(eachSpriteDiv); |
| 73 | + |
| 74 | + mySpriteSpot.appendChild(div); |
| 75 | + |
| 76 | + console.log('Name is' + name + 'sprite is' + sprites[sprite]); |
| 77 | +} |
0 commit comments