JSDR213 · AnthonyBattista02 · May 2, 2023 · May 16, 2023 · May 16, 2023 · May 16, 2023
diff --git a/README.md b/README.md
@@ -1,16 +1,26 @@
+## SEIR 0911EC
+
 ### PokeAPI lab
 
+<img src="./assets/pokemon1.jpeg">
+
+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
 <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 +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!
+
+
+<img src="./assets/pokedex-3.jpeg">
diff --git a/assets/pokedex-3.jpeg b/assets/pokedex-3.jpeg
diff --git a/assets/pokemon1.jpeg b/assets/pokemon1.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pokedex 2</title>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body>
+    <header>
+        <h1 id="title">Pokedex 2</h1>
+        <h4 id="description">Search for any pokemon in the box below to find out more about them!</h4>
+        <form id="seachBar">
+            <input type="text"  value="" placeholder="Choose your pokemon!"  id="inputBar">
+            <input type="button"  value="Generate" id="searchButton">
+        </form>
+        <div id="logo"></div>
+    </header>
+
+    <div id="main">
+        <div id="allstats">
+            <div id="pokeName"></div>
+            <div id="types"></div>
+            <div id="height-weight"></div>
+
+            <div id="stats"></div>
+            <div id="sprites"></div>
+        </div>
+            <div class="image-box" id="male-images">
+                <div class="poke-image sex" id="sex1">Male Sprites</div>
+                <div class="poke-image" id="standard-front"></div>
+                <div class="poke-image" id="standard-back"></div>
+                <div class="poke-image" id="shiny-front"></div>
+                <div class="poke-image" id="shiny-back"></div>
+            </div>
+            <div class="image-box" id="female-images">
+                <div class="poke-image sex" id="sex2">Female Sprites</div>
+                <div class="poke-image" id="standard-front"></div>
+                <div class="poke-image" id="standard-back"></div>
+                <div class="poke-image" id="shiny-front"></div>
+                <div class="poke-image" id="shiny-back"></div>
+            </div>
+        </div>
+        <div id="abilities"></div>
+    </div>
+    <!-- <h2 id="pokemonName"> </h2>
+    <img id="pokemonImage"/> -->
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,153 @@
+//placeholders for HTML divs
+const body = document.getElementsByTagName('body')
+//Header
+const inputButton = document.querySelector(`#searchButton`)
+//Text Input
+let pName = document.querySelector("#pokeName")
+let pTypes = document.querySelector("#types")
+let pHeightWeight = document.querySelector("#height-weight")
+let pAbilities = document.querySelector("#abilities")
+let pStats = document.querySelector("#stats")
+//male images
+let mStdFrt = document.querySelector(`#male-images`).querySelector('#standard-front')
+let mStdBck = document.querySelector(`#male-images`).querySelector('#standard-back')
+let mShnyFrt = document.querySelector(`#male-images`).querySelector('#shiny-front')
+let mShnyBck = document.querySelector(`#male-images`).querySelector('#shiny-back')
+//female images
+let fStdFrt = document.querySelector(`#female-images`).querySelector('#standard-front')
+let fStdBck = document.querySelector(`#female-images`).querySelector('#standard-back')
+let fShnyFrt = document.querySelector(`#female-images`).querySelector('#shiny-front')
+let fShnyBck = document.querySelector(`#female-images`).querySelector('#shiny-back')
+
+inputButton.addEventListener('click', async () => {
+    //where does this need to be scoped?
+    let textInput = document.querySelector("#inputBar").value
+    const getSinglePokeMon = async () => {
+        const pokeName = await axios.get(`https://pokeapi.co/api/v2/pokemon/${textInput}`)
+      //  let placeholderImage = pokeName.data.sprites.front_default
+        console.log(pokeName.data)
+      //  setting visibilities
+        document.querySelector("#sex1").style.visibility = 'visible'
+        document.querySelector("#sex2").style.visibility = 'visible'
+        document.querySelector("#male-images").style.visibility = 'visible'
+        document.querySelector("#female-images").style.visibility = 'visible'
+        //name
+        pName.innerHTML = `Name: ${pokeName.data.name}`
+        //type
+        if ((pokeName.data.types).length > 1) {
+            pTypes.innerHTML = `Types: `
+        } else {
+            pTypes.innerHTML = `Type: `
+        }
+        for (let i = 0; i < (pokeName.data.types).length; i++) {
+            let placeholderTypeArray = pokeName.data.types[i].type.name
+            pTypes.innerHTML += `${placeholderTypeArray} `
+        //Height/Weight
+        pHeightWeight.innerHTML = `Height: ${pokeName.data.height} <br> Weight: ${pokeName.data.weight}`
+        }
+        //Abilities
+        if ((pokeName.data.abilities).length > 1) {
+            pAbilities.innerHTML = `Abilities: `
+        } else {
+            pAbilities.innerHTML = `Ability: `
+        }
+        //console.log(pokeName.data.abilities[0].ability.name)
+        for (let i = 0; i < (pokeName.data.abilities).length; i++) {
+            let placeholderAbilityArray = pokeName.data.abilities[i].ability.name
+            pAbilities.innerHTML += `${placeholderAbilityArray} `
+        //Height/Weight
+        pHeightWeight.innerHTML = `Height: ${pokeName.data.height} <br> Weight: ${pokeName.data.weight}`
+        }
+        //stats
+        pStats.innerHTML = `HP: ${pokeName.data.stats[0].base_stat} <br>ATK: ${pokeName.data.stats[1].base_stat} <br>DEF: ${pokeName.data.stats[2].base_stat} <br>SPD: ${pokeName.data.stats[3].base_stat} <br>SpATK: ${pokeName.data.stats[4].base_stat} <br>SpDEF: ${pokeName.data.stats[5].base_stat}`
+        //male images
+        mStdFrt.innerHTML = `<img src=${pokeName.data.sprites.front_default}>`
+        mStdBck.innerHTML = `<img src=${pokeName.data.sprites.back_default}>`
+        mShnyFrt.innerHTML = `<img src=${pokeName.data.sprites.front_shiny}>`
+        mShnyBck.innerHTML = `<img src=${pokeName.data.sprites.back_shiny}>`
+        //female images
+        fStdFrt.innerHTML = `<img src=${pokeName.data.sprites.front_female}>`
+        fStdBck.innerHTML = `<img src=${pokeName.data.sprites.back_female}>`
+        fShnyFrt.innerHTML = `<img src=${pokeName.data.sprites.front_shiny_female}>`
+        fShnyBck.innerHTML = `<img src=${pokeName.data.sprites.back_shiny_female}>`
+        //image tester
+        if (fStdFrt.innerHTML == `<img src="null">`) {
+            document.querySelector(`#female-images`).style.visibility = 'hidden'
+            document.querySelector("#sex2").style.visibility = 'hidden'
+            document.querySelector("#sex1").innerText = "Sprites"
+        }
+        document.querySelector("#sex1").innerText = "Male Sprites"
+        //background color
+        let firstType = pokeName.data.types[0].type.name
+        document.body.style.color = "black";
+        switch (firstType) {
+            case "normal":
+                document.body.style.background = "white";
+                break;
+            case "fighting":
+                document.body.style.background = "rgba(255, 123, 0, 0.661)";
+                break;
+            case "flying":
+                document.body.style.background = "skyblue";
+                break;
+            case "poison":
+                document.body.style.background = "purple";
+                break;
+            case "ground":
+                document.body.style.background = "brown";
+                break;
+            case "rock":
+                document.body.style.background = "rgb(178, 87, 87)";
+                break;
+            case "bug":
+                document.body.style.background = "limegreen";
+                break;
+            case "ghost":
+                document.body.style.background = "rgba(198, 12, 198, 0.592)";
+                break;
+            case "steel":
+                document.body.style.background = "silver";
+                break;
+            case "fire":
+                document.body.style.background = "red";
+                document.body.style.color = "white";
+                break;
+            case "water":
+                document.body.style.background = "blue";
+                document.body.style.color = "white";
+                break;
+            case "grass":
+                document.body.style.background = "green";
+                break;
+            case "electric":
+                document.body.style.background = "yellow";
+                break;
+            case "psychic":
+                document.body.style.background = "hotpink";
+                break;
+            case "ice":
+                document.body.style.background = "lightblue";
+                break;
+            case "dragon":
+                document.body.style.background = "rgb(221, 72, 221)";
+                break;
+            case "dark":
+                document.body.style.background = "rgb(69, 69, 69)";
+                document.body.style.color = "white";
+                break;
+            case "fairy":
+                document.body.style.background = "pink";
+                break;
+            case "unknown":
+                document.body.style.background = "black";
+                break;
+            case "shadow":
+                document.body.style.background = "rgb(91, 91, 91)";
+                break;
+
+        }
+
+    }
+    getSinglePokeMon()
+}
+)
diff --git a/style.css b/style.css
@@ -0,0 +1,65 @@
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#inputBar {
+  font-size: 30px;
+}
+
+#searchButton {
+  font-size: 30px;
+}
+
+body { 
+  font-family: 'Press Start 2P', cursive;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#main {
+  margin-top: 20px;
+  border: 2px black solid;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  height: 255px;
+  width: 800px
+
+}
+
+#allstats {
+  display: flex;
+  justify-content: left;
+  text-align: left;
+  flex-direction: column;
+}
+
+.image-box {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 250px;
+  border: 2px black solid;
+  visibility: hidden;
+
+}
+
+.sex {
+  width:200px;
+  text-align: center;
+  font-size: 20px;
+  visibility: hidden;
+}
+
+#abilities { 
+  padding-top: 10px;
+}
+