Basic squirtle homework complete

Catsudemo · Jul 10, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jul 7, 2019 · Jul 7, 2019
commit cf4d80ea758a9582de78736bfe26e409488f0572
diff --git a/Week2/homework/squirtle-squad/SquirtleSquad.html b/Week2/homework/squirtle-squad/SquirtleSquad.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="squirtle.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>Meet the Squirtle Squad</title>
+  </head>
+  <body>
+    <section class="section">
+      <h2>Introducing the Squirtle Squad</h2>
+      <br />
+      <div id="quoteSpace"></div>
+
+      <div id="poke-selector"></div>
+      <script type="text/javascript" src="./squirtle-sprites.js"></script>
+      <div id="footer">Made for FooCoding Javascript 2.</div>
+    </section>
+  </body>
+</html>
diff --git a/Week2/homework/squirtle-squad/squirtle-sprites.js b/Week2/homework/squirtle-squad/squirtle-sprites.js
@@ -0,0 +1,49 @@
+/* eslint-disable */
+
+console.log('im fucking awawke');
+/* 
+  Call this function to get a JSON string of the data
+  (simulates calling a server to retrieve data)
+*/
+function fetchPokemonData() {
+  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}`;
+}
+
+/*Code goes below */
+
+function parsemon() {
+  let pokeProperties = JSON.parse(fetchPokemonData());
+  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 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/squirtle-squad/squirtle.css b/Week2/homework/squirtle-squad/squirtle.css
@@ -0,0 +1,80 @@
+@import url('https://fonts.googleapis.com/css?family=Abel');
+@import url('https://fonts.googleapis.com/css?family=Karla');
+body {
+  background-image: url('water-background.jpg');
+  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: #084c61;
+  text-align: center;
+}
+
+.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: #2e2c2f;
+  color: #444;
+}
+
+.box {
+  background-color: #084c61;
+  color: #c6c5b9;
+  border-radius: 5px;
+  font-size: 100%;
+  max-width: 400px;
+  min-height: 200px;
+}
+
+img {
+  width: auto;
+  height: 200px;
+  padding: 10px;
+  margin: 10px;
+}
+
+#footer {
+  font-size: 20px;
+  padding: 20px;
+}
+
+@media screen and (max-width: 600px) {
+  img {
+    display: none;
+  }
+  @media only screen and (max-width: 800px) {
+    .wrapper {
+      display: grid;
+      align-items: center;
+      grid-template-columns: 1fr 1fr;
+    }
+    .box {
+      height: 400px;
+    }
+  }
+}
diff --git a/Week2/homework/squirtle-squad/water-background.jpg b/Week2/homework/squirtle-squad/water-background.jpg