Catsudemo · Catsudemo · Jul 10, 2019 · Jul 10, 2019 · Jul 10, 2019
diff --git a/Week2/homework/pokemon/PokemonSelector.html b/Week2/homework/pokemon/PokemonSelector.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="pokemon.css" />
+    <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>Pokemon Selector</title>
+  </head>
+  <body>
+    <div style="margin-left:25%">
+      <section class="section">
+        <div id="oakSide" style="width:25%">
+          <img id="oakImage" src="prof_oak.png" />
+        </div>
+        <h3>Welcome to Professor Oak's Lab</h3>
+
+        <br />
+        <div id="quoteSpace"></div>
+
+        <div id="poke-selector"></div>
+        <script type="text/javascript" src="./poke-sprites.js"></script>
+        <div id="footer">Made for FooCoding Javascript 2.</div>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/Week2/homework/pokemon/poke-sprites.js b/Week2/homework/pokemon/poke-sprites.js
@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/* 
+  Call this function to get a JSON string of the data
+  (simulates calling a server to retrieve data)
+*/
+var name = window.prompt('Enter your name:');
+var color = window.prompt('Choose fire, water or grass or take a risk');
+
+function fetchPokemonData(type) {
+  if (type == 'Fire' || type == 'fire') {
+    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}}`;
+  } else if (type == 'water' || type == 'Water') {
+    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}`;
+  } else if (type == 'grass' || type == 'Grass') {
+    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}`;
+  } else {
+    return `{"abilities": [{"ability": {"name": "shapeshift","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": "ditto","url": "https://pokeapi.co/api/v2/pokemon-form/1/"}],"name": "ditto","order": 1,"species": {"name": "ditto","url": "https://pokeapi.co/api/v2/pokemon-species/1/"},"sprites": {"back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/132.png","back_female": null,"back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/132.png","back_shiny_female": null,"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png","front_female": null, "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png", "front_shiny_female": null},"weight": 69}`;
+  }
+}
+
+function pokemonName(type) {
+  type = type.toLowerCase();
+  if (type == 'fire') {
+    return 'Charmander';
+  }
+  if (type == 'water') {
+    return 'Squirtle';
+  }
+  if (type == 'grass') {
+    return 'Bulbasaur';
+  } else {
+    return "...Oh! It seems that was actually a Ditto! Well I'm sure it";
+  }
+}
+
+let pokeName = pokemonName(color);
+
+function parsemon() {
+  let pokeProperties = JSON.parse(fetchPokemonData(color));
+  let justSprites = Object.keys(pokeProperties.sprites)
+    .map(key => pokeProperties.sprites[key])
+    .filter(sprite => sprite);
+  return justSprites;
+}
+let unorderedSprites = parsemon();
+let sprites = unorderedSprites.reverse();
+
+const mySpriteSpot = document.querySelector('#poke-selector');
+
+const intro = document.createElement('div');
+intro.setAttribute('class', 'oakText');
+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. 
+Well it looks like you've made a great choice with your first Pokemon. I'm sure this ${pokeName} will serve you well.`;
+mySpriteSpot.appendChild(intro);
+
+const div = document.createElement('div');
+div.setAttribute('class', 'wrapper');
+
+for (sprite in sprites) {
+  const eachSpriteDiv = document.createElement('div');
+  eachSpriteDiv.id = sprite;
+  eachSpriteDiv.setAttribute('class', 'box');
+
+  // const name = document.createElement('h4');
+  // name.innerText = `This is sprite ${sprite}`;
+  // eachSpriteDiv.appendChild(name);
+  // console.log(name);
+
+  const picture = document.createElement('IMG');
+  picture.src = sprites[sprite];
+  eachSpriteDiv.appendChild(picture);
+
+  div.appendChild(eachSpriteDiv);
+
+  mySpriteSpot.appendChild(div);
+
+  console.log('Name is' + name + 'sprite is' + sprites[sprite]);
+}
diff --git a/Week2/homework/pokemon/pokeball-background.png b/Week2/homework/pokemon/pokeball-background.png
diff --git a/Week2/homework/pokemon/pokemon.css b/Week2/homework/pokemon/pokemon.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css?family=Abel');
+@import url('https://fonts.googleapis.com/css?family=Karla');
+body {
+  background-image: url('pokeball-background.png');
+  font-family: Karla;
+  margin: 40px;
+  color: #f4f4ed;
+  font-size: 30px;
+}
+
+h4 {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: turquoise;
+}
+
+section {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 85%;
+  height: auto;
+  background-color: wheat;
+  text-align: center;
+}
+
+.oakText {
+  font-family: Abel;
+  color: #444;
+  font-size: 20px;
+  text-align: center;
+}
+
+#oakSide {
+  float: left;
+}
+
+#oakImage {
+  float: left;
+  min-height: 500px;
+  width: auto;
+}
+
+.wrapper {
+  font-family: Abel;
+  text-align: left;
+  padding-top: 25px;
+  padding-bottom: 25px;
+  font-size: 20px;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-gap: 10px;
+  background-color: wheat;
+  color: #444;
+}
+
+.box {
+  background-color: wheat;
+  color: #c6c5b9;
+  border-radius: 5px;
+  font-size: 100%;
+  width: 25%;
+  max-width: 400px;
+  min-height: 200px;
+}
+
+img {
+  width: 300%;
+  height: auto;
+  padding: 10px;
+  margin: 10px;
+}
+
+#footer {
+  font-size: 20px;
+  padding: 20px;
+}
+
+@media screen and (max-width: 600px) {
+  .wrapper {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr;
+  }
+  img {
+    width: auto;
+    height: 80px;
+    padding: 5px;
+    margin: 5px;
+    ;
+  }
+  #oakImage {
+    float: left;
+    min-height: 200px;
+    width: auto;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .wrapper {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr 1fr;
+  }
+  .box {
+    height: 400px;
+  }
+  #oakSide {
+    float: left;
+  }
+  #oakImage {
+    display: none;
+  }
+}
diff --git a/Week2/homework/pokemon/prof_oak.png b/Week2/homework/pokemon/prof_oak.png