diff --git a/README.md b/README.md index b8dcbcc..d41eb77 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,26 @@ +## SEIR 0911EC + ### PokeAPI lab + + +Let's be the very best, that no one ever was. +To make API calls is our quest +DOM Manipulation is our cause! + For this lab lets create our own Pokedex by making an Axios call to the PokeAPI! Lets first create an html file, attach in our JS Script file and the Axios library, and enter in a search bar and button to submit in our API call We can put in some empty HTML elements as well to populate with our response data, in this case just an H2 and an Image, but we can put in as much as we want once we get our calls made. Scaffold in a CSS file to add some style once the data is rendered on screen too! +Explore the https://pokeapi.co/ API with ThunderClient to see what types of endpoints are available, and what your data will look like + You may need to Map through and run some conditionals for some peices of information (abilities, types...) if you want to put in additional peices of API data ```html
- +
@@ -29,16 +39,25 @@ let button = document.querySelector("#searchButton") button.addEventListener('click', async () => { - let textInput = document.querySelector("#inputBar").value let pokemonName = document.querySelector("#pokemonName") let pokemonImage = document.querySelector("#pokemonImage") - + //where does this need to be scoped? + let textInput = document.querySelector("#inputBar").value + //Axios call goes here - //remember to use Await! + //remember to use Async and Await! //DOM Setters go here } - +) ``` + +Once you have the initial data rendered, try to add as much as possible. We can search Pokemon by names and numbers, can we also search for Moves, Berries, and other information? + + +Finally, this is a chance to really explore your styling skills. Be sure to create some wireframes to work with before creating something you can really show off, and have fun with! + + + diff --git a/assets/pokedex-3.jpeg b/assets/pokedex-3.jpeg new file mode 100644 index 0000000..90c3b30 Binary files /dev/null and b/assets/pokedex-3.jpeg differ diff --git a/assets/pokemon1.jpeg b/assets/pokemon1.jpeg new file mode 100644 index 0000000..7cabea0 Binary files /dev/null and b/assets/pokemon1.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..7ab9254 --- /dev/null +++ b/index.html @@ -0,0 +1,29 @@ + + + + + + + + + + Document + + + + +
+ +
+ +
+ + +
+ + +
+

+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..77ff9a4 --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +const button = document.querySelector('#searchButton') +const textInput = document.querySelector('#inputBar') +const pokemonName = document.querySelector('#pokemonName') +const pokemonImage = document.querySelector('#pokemonImage') + + +button.addEventListener('click', async () => { + //Remove elements with ability id + let toRemove = document.querySelectorAll('.blue') + if(toRemove){ + toRemove.forEach((el) => el.remove()) + } + //Text value from input bar + let pokeInput = textInput.value.toLowerCase() + let response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokeInput}`) + console.log(response) + //name code + let pokeName = response.data.name + pokemonName.innerHTML = pokeName + //image code + let pokeImage = response.data.sprites.front_default + pokemonImage.innerHTML = `` + //stats + //stats header + let statsHeader = document.createElement('h3') + statsHeader.setAttribute('class', 'blue') + statsHeader.append(`stats`) + //height div + let pokeHeight = response.data.height + let heightDiv = document.createElement('div') + heightDiv.setAttribute('class', 'blue stats') + heightDiv.append(`${pokeHeight} poke-units tall`) + //weight div + let pokeWeight = response.data.weight + let weightDiv = document.createElement('div') + weightDiv.setAttribute('class', 'blue stats') + weightDiv.append(`weighs ${pokeWeight} poke-units`) + document.body.append(statsHeader, heightDiv, weightDiv) + //abilities div creation + let pokeAbilities = response.data.abilities + if (pokeAbilities.length > 0){ + let newHeader = document.createElement('h3') + newHeader.setAttribute('class', 'blue') + newHeader.append(`${pokeName}'s abilities`) + document.body.append(newHeader) + } + pokeAbilities.forEach((ab) => { + let abilityName = ab.ability.name + let newDiv = document.createElement('div') + newDiv.setAttribute('class', 'abilities blue') + newDiv.append(abilityName) + document.body.append(newDiv) + }) + //held items + let pokeHeld = response.data.held_items + if (pokeHeld.length > 0){ + let newHeader = document.createElement('h3') + newHeader.setAttribute('class', 'blue') + newHeader.append(`${pokeName}'s held items`) + document.body.append(newHeader) + } + pokeHeld.forEach((itm) => { + let itemHeld = itm.item.name + let newDiv = document.createElement('div') + newDiv.setAttribute('class', 'held-item blue') + newDiv.append(itemHeld) + document.body.append(newDiv) + }) +}) diff --git a/style.css b/style.css new file mode 100644 index 0000000..99e5cfc --- /dev/null +++ b/style.css @@ -0,0 +1,63 @@ +header { + width: 100%; +} + +body { + background-color: #102a25; + /* color: #eeeced; */ + color: #eeeced; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: 'Roboto Mono', monospace; +} + +h2 { + color: #1a1a19; + margin-top: -50px; +} + +h3 { + color:#debd29; + font-size: 24px; + padding: 20px 0 5px 0; + border-bottom: 2px solid #eeeced; +} + +img { + margin: auto; + margin-top: 20px; + height: 30vh; + width: 30vh; + border-radius: 5px; + background-color: #eeeced; + border: 20px solid #dbd1c2; + border-bottom: 50px solid #dbd1c2; +} + +form { + display: flex; + flex-direction: column; + align-content: center; + margin-top: 5%; +} + +#inputBar, #searchButton { + text-align: center; + padding: 5px 30px; + margin: 2px; + font-family: 'Roboto Mono', monospace; + background-color: #dbd1c2; + color: #1a1a19; + border: 1px solid #1a1a19; + border-radius: 5px; +} + +#searchButton:hover { + background-color: #debd29; +} + +.blue { + margin: 5px 0; +}