code-differently · SpringerJordan · Feb 24, 2021 · Mar 4, 2021 · kburd · Mar 15, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/data/schema.sql b/data/schema.sql
@@ -0,0 +1,31 @@
+let mysql = require(‘mysql’);
+let con = mysql = mysql.createConnection({
+    host: “localhost”,
+    user: “root”,
+    password: Jordan2017,
+    database: “Pokemon”
+});
+con.connect(err => {
+    if (err) {
+        throw err;
+    }
+    con.query(“SELECT * FROM pokemon”, (err, result, fields) => {
+        if (err) {
+            throw err;
+        }
+        console.log(result);
+    });
+});
+let pokemon_id = 1;
+let name = “Bulbasaur”;
+let color = “Green”;
+//console.log(`INSERT into pokemon (pokemon_id, name, color) VALUES (${pokemon_id}, ${name}, ${color});`);
+con.query(`INSERT into pokemon (pokemon_id, name, color) VALUES (${pokemon_id}, ${name}, ${color});`, (err, result, fields) => {
+    if (err) {
+        throw err;
+    }
+});
+-- 9:00
+-- ALTER USER ‘root’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘password’;
+-- 9:00
+-- FLUSH PRIVILEGES;
diff --git a/index.js b/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "homepage": "https://github.com/code-differently/Pokedex-App#readme",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.17.1"
   }
 }
diff --git a/rest/app.js b/rest/app.js
@@ -0,0 +1,58 @@
+const express = require('express')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+})
+
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`)
+})
+console.log(hello);
+
+let pokedex = document.getElementById("pokedex");
+console.log(pokedex);
+let url = "https://pokeapi.co/api/v2/pokemon/";
+let fetchPokemon = () => {
+  const promises = [];
+  for (let i = 1; i <= 139; i++, status == 200) {
+    // console.log(url + i);
+
+      promises.push(fetch(url + i).then((res) => {
+        return res.json();
+
+    }));
+  }
+
+  Promise.all(promises).then(results => {
+    const pokemon = results.map((data) => ({
+      name: data.name,
+      id: data.id,
+      image: data.sprites['front_shiny'],
+      type: data.types[0].type.name
+    }));
+    displayPokemon(pokemon);
+  });
+};
+let thisPokemon;
+let displayPokemon = (pokemon) => {
+  // console.log(pokemon.type);
+  const pokemonHTMLString = pokemon.map(
+    (pokeman) => `  
+          <div class = "card ${pokeman.type}">
+                <img src= "${pokeman.image}" />
+                <h2> ${pokeman.id}. ${pokeman.name}</h2>
+                <p>Type: ${pokeman.type}</p>
+           </div>
+      `).join('');
+  pokedex.innerHTML = pokemonHTMLString;
+  //   return cardColor();
+};
+// card.classList.add('card', `${pokeman.types[0].type.name}`, 'font-weight-bold');
+function cardColor() {
+  if (pokeman.type === 'grass') {
+    document.getElementsByClassName("card")[0].style.backgroundColor = "blue";
+  }
+};
+fetchPokemon();
diff --git a/rest/index.js b/rest/index.js
diff --git a/web/.DS_Store b/web/.DS_Store
diff --git a/web/index.html b/web/index.html
@@ -1,11 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <!-- <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>JAF's Pokedex</title>
+    <link rel="stylesheet" href="styles.css" />
+    <!-- <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet" /> -->
 </head>
+
 <body>
-    <p>Hello Pokemon!</p>
+    <div class="container">
+        <h1>JAF's Pokedex</h1>
+        <h2>Gotta catch'em all!</h2>
+        <ol id="pokedex">  </ol>
+
+    </div>
+    <script src="../rest/app.js"></script>
 </body>
+
 </html>
diff --git a/web/styles.css b/web/styles.css
@@ -0,0 +1,135 @@
+/*PokedexJAF.css*/
+/* testiing testing testing  */
+body {
+    background-color: orangered;
+    color: white;
+    margin: 0;
+    font-family: rubik;
+    }
+
+    .container {
+    padding: 40px;
+    margin: 0 auto;
+    }
+
+    h1 {
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 20px;
+    font-style: pokemon;
+    }
+    h2{
+    font-style: andybold;
+    text-align: center;
+    }
+
+    /* pokedex {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-gap: 20px;
+    padding-inline-start: 0;
+    } */
+
+    .card {
+    height: 200px;
+    width: 180px;
+    list-style: none;
+    padding: 40px;
+    background-color: #f4f4f4;
+    color: #222;
+    text-align: center;
+    display: inline-block;
+    margin: 1%;
+    }
+
+    .card:hover {
+    animation: bounce 0.5s linear;
+    }
+
+    .card-title {
+    text-transform: capitalize;
+    margin-bottom: 0px;
+    font-size: 32px;
+    font-weight: normal;
+    }
+    .card-subtitle {
+    margin-top: 5px;
+    color: #666;
+    font-weight: lighter;
+    }
+
+    .card-image {
+    height: 180px;
+    }
+    /* text wrap */
+    .fire {
+        background-color: firebrick;
+       }
+
+       .bug {
+        background-color: greenyellow;
+       }
+
+       .grass {
+        background-color: green;
+       }
+
+       .water {
+        background-color: aqua;
+       }
+
+       .normal {
+        background-color: burlywood;
+       }
+
+       .electric {
+        background-color: yellow;
+       }
+
+       .poison {
+        background-color: slateblue;
+       }
+
+       .ground {
+        background-color: chocolate;
+       }
+
+       .fairy {
+        background-color: pink;
+       }
+
+       .psychic {
+        background-color: rebeccapurple;
+       }
+
+       .rock {
+        background-color: grey;
+       }
+
+       .fighting {
+        background-color: crimson;
+       }
+
+       .ghost {
+        background-color: darkmagenta;
+       }
+
+       .ice {
+        background-color: darkturquoise;
+       }
+
+       .dragon {
+        background-color: olive;
+       }
+
+       .steel {
+        background-color: steelblue;
+       }
+
+       .dark {
+        background-color: darkslategrey;
+       }
+
+       .flying {
+        background-color: lightskyblue;
+       }