JSDR213 · chrischen96 · May 2, 2023 · May 16, 2023 · May 16, 2023 · May 16, 2023
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+## SEIR 0508
+
 ### PokeAPI lab
 
 
@@ -6,11 +8,13 @@ Lets first create an html file, attach in our JS Script file and the Axios libra
 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
 <form>
-    <input type="text"  value="" placeholder="Enter text here"  id="inputBar">
+    <input type="text"  value="" placeholder="Choose your pokemon!"  id="inputBar">
     <input type="button"  value="Click here" id="searchButton">
 </form>
 
@@ -29,16 +33,22 @@ 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/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <form>
+            <input type="text"  value="" placeholder="Choose your pokemon!"  id="inputBar">
+            <input type="button"  value="Click here" id="searchButton">
+        </form>
+    </header>
+
+    <section class="title">
+        <h1 id="pokemonName"></h1>
+        <div id="pokemonImage"></div>
+        <img id="homeImage"/>
+    </section>
+
+    <section class="info">
+        <div class="basic">
+            <p id="id"></p>
+            <p id="name"></p>
+            <p id="order"></p>
+            <p id="height"></p>
+            <p id="weight"></p>
+            <p id="base_experience"></p>
+        </div>
+
+        <div class="move"></div>
+        <div class="ability"></div>
+    </section>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,66 @@
+console.log('working')
+let button = document.querySelector("#searchButton")
+
+button.addEventListener('click', async () => {
+
+    let pokemonName = document.querySelector("#pokemonName")
+    let pokemonImage = document.querySelector("#pokemonImage")
+    let homeImage = document.querySelector('#homeImage')
+    let textInput = document.querySelector("#inputBar").value
+    let name = document.getElementById('name')
+    let id = document.getElementById('id')
+    let order = document.getElementById('order')
+    let height = document.getElementById('height')
+    let weight  = document.getElementById('weight')
+    let base_experience = document.getElementById('base_experience')
+    let pokemonAbility = document.querySelector(".ability")
+    let pokemonMove = document.querySelector('.move')
+
+
+    //Axios call goes here
+    //remember to use Async and Await!
+    //DOM Setters go here
+    const pokemonRes = await axios.get(`https://pokeapi.co/api/v2/pokemon/${textInput}`)
+    let pokemon = pokemonRes.data
+
+    //Name
+    pokemonName.innerText = pokemon.name.toUpperCase()
+
+    //Picture
+    let pic1 = `<img src="${pokemon.sprites.front_default}"/>`
+    let pic2 = `<img src="${pokemon.sprites.front_shiny}"/>`
+    let pic3 = `<img src="${pokemon.sprites.back_default}"/>`
+    let pic4 = `<img src="${pokemon.sprites.back_shiny}"/>`
+    pokemonImage.innerHTML = pic1 + pic2 + pic3 + pic4
+    homeImage.src = `${pokemon.sprites.other.home.front_default}`
+
+    //Basic info
+    console.log(pokemon.order)
+    id.innerHTML = `ID: <span>${pokemon.id}</span>`
+    name.innerHTML = `Name: <span>${pokemon.name}</span>`
+    order.innerHTML = `Order: <span>${pokemon.order}</span>`
+    console.log(order)
+    height.innerHTML = `Height:  <span>${pokemon.height} </span>`
+    weight.innerHTML = `Weight:  <span>${pokemon.weight} </span>`
+    base_experience.innerHTML = `Base Experience:  <span>${pokemon.base_experience} </span>`
+
+    //Abilities
+    let abilitiesData= pokemon.abilities
+    let aTitle= `<p>Ability(ies):</p>`
+    let aList = ``
+    abilitiesData.forEach( (a) => {
+        aList += `<li>${a.ability.name}</li>`
+    })
+    pokemonAbility.innerHTML = aTitle + aList
+
+    //moves
+    let moveData= pokemon.moves
+    let mTitle= `<p>Move(s):</p>`
+    let mList = ``
+    for (let i = 0; i < 10; i++) {
+        const move = moveData[i].move.name
+        mList += `<li>${move}</li>`
+    }
+    pokemonMove.innerHTML = mTitle + mList
+}
+)
diff --git a/style.css b/style.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');
+
+body {
+    width: 900px;
+    margin: auto;
+    font-family: 'Kiwi Maru', serif;
+
+}
+
+form {
+    padding: 50px;
+    text-align: center;
+    margin: 0 auto;
+}
+
+input {
+    border: none;
+    height: 30px;
+    border-radius: 5px;
+}
+
+#inputBar {
+    width: 200px;
+    padding-left: 10px;
+    border: 2px solid tomato;
+}
+
+#searchButton {
+    background-color: tomato;
+    color: white;
+}
+
+span {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#pokemonName {
+    text-align: center;
+    color: tomato;
+}
+
+#pokemonImage {
+    text-align: center;
+    margin: 0 auto;
+}
+
+#homeImage {
+    display: inline-block;
+    text-align: center;
+    width:30vmin
+}
+
+img {
+    display: inline_block;
+    margin: 0 auto;
+}
+
+.info {
+    width: 70vmin;
+    margin: 8vmin auto;
+    display: grid;
+    grid-template-columns: auto auto auto;
+}
+
+.info > div {
+    display: flex;
+    flex-direction: column;
+}
+
+li {
+    line-height: 1.8em;
+    list-style-type: circle;
+    padding: 0;
+    margin: 0;
+}