code-differently · koggenfuss · Feb 10, 2021 · Feb 10, 2021 · Feb 11, 2021 · Feb 11, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,9 @@
   },
   "homepage": "https://github.com/code-differently/Pokedex-App#readme",
   "dependencies": {
-    "express": "^4.17.1"
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "pokedex-promise-v2": "^3.3.0",
+    "xmlhttprequest": "^1.8.0"
   }
 }
diff --git a/rest/index.js b/rest/index.js
@@ -1,11 +1,74 @@
 const express = require('express')
-const app = express()
-const port = 3000
+const axios = require('axios');
+const cors = require("cors")
+var Pokedex = require('pokedex-promise-v2');
+var P = new Pokedex();
 
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-})
+const app = express();
+const port = 3000;
+
+app.set('view engine', 'pug');
+app.use(cors());
+
+let pokemon;
+
+class Pokemon {
+  constructor(name, id, img, type) {
+    this.name = name;
+    this.id = id;
+    this.img = img;
+    this.type = type;
+  }
+}
+
+let pokedex = [];
+let pokeman;
+
+app.get('/', async (req, res) => {
+
+    var interval = {
+      limit: 50,
+      offset: 0
+    }
+
+  //select list of 5 pokemon, with their names and urls
+  //loop through each one's url to 
+  //then access the rest of its data
+  //create an instance of the pokemon class
+  //fill it with the data from second API call
+  //push that instance object to an array
+  //loop restarts
+
+  P.getPokemonsList(interval) // with Promise
+  .then(function(response) {
+    console.log(response.results);
+    for ( let i = 0 ; i < response.results.length ; i++ ) {
+
+      P.resource([response.results[i].url]) // with Promise
+      .then(function(response) {
+        pokeman = response.map(data => (
+          {
+            name: data.name,
+            id: data.id,
+            img: data.sprites["front_default"],
+            type: data.types[0].type.name
+          }
+        ))
+        pokedex.push(pokeman);
+        return;
+
+      }).catch(function(error) {
+        console.log('There was an ERROR: ', error);
+      })
+    } 
+    res.send( pokedex );
+
+  }).catch(function(error) {
+    console.log('There was an ERROR: ', error);
+  });
+});
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
-})
+  console.log(`Example app listening at https://localhost:${port}`)
+});
+
diff --git a/web/index.html b/web/index.html
@@ -3,9 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Pokedex</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <p>Hello Pokemon!</p>
+    <div id="container">
+    </div>
+    <script src="index.js"></script>
 </body>
 </html>
diff --git a/web/index.js b/web/index.js
@@ -0,0 +1,44 @@
+const colors = [
+      ["normal", "#A8A77A"],
+      ["fire", "#EE8130"],
+      ["water", "#6390F0"],
+      ["electric", "#F7D02C"],
+      ["grass", "#7AC74C"],
+      ["ice", "#96D9D6"],
+      ["fighting", "#C22E28"],
+      ["poison", "#A33EA1"],
+      ["ground", "#E2BF65"],
+      ["flying", "#A98FF3"],
+      ["psychic", "#F94487"],
+      ["bug", "#A6B91A"],
+      ["rock", "#BA136"],
+      ["ghost", "#735797"],
+      ["dragon", "#6F35FC"],
+      ["dark", "#705746"],
+      ["steel", "#B7B7CE"],
+      ["fairy", "#D685AD"]
+   ]
+let cardType;
+let xhr = new XMLHttpRequest();
+xhr.open("GET", "http://localhost:3000/")
+
+xhr.onreadystatechange = function(){
+    if(this.readyState === 4 && this.status === 200){
+
+        let data = JSON.parse(this.responseText);
+        for ( let i = 0 ; i < data.length ; i++ ) {
+            for ( let j = 0 ; j < colors.length; j++) {
+                if (colors[j][0] === data[i][0].type) {
+                    cardType = colors[j][1];                }
+            }
+            document.getElementById('container').innerHTML += `
+                    <div class="card" style="background-color: ${cardType}">
+                    <h1>${data[i][0].name}, #${data[i][0].id}</h1>
+                    <img src="${data[i][0].img}">  
+                </div> 
+            `;
+        }
+    }
+}
+
+xhr.send();
diff --git a/web/style.css b/web/style.css
@@ -0,0 +1,31 @@
+
+body {
+    font-family: sans-serif, 'Segoe-UI';
+    font-size: 16px;
+}
+
+#container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.card {
+    max-width: 600px;
+    color: aliceblue;
+    background-color:coral;
+    border: 1px solid aliceblue;
+    border-radius: 5px;
+    padding: 2em;
+}
+
+img {
+    margin: auto;
+    width: 60%;
+}
+
+h1 {
+    text-align: center;
+
+}