code-differently · rswoodruff · Feb 9, 2021 · Feb 15, 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,11 @@
   },
   "homepage": "https://github.com/code-differently/Pokedex-App#readme",
   "dependencies": {
-    "express": "^4.17.1"
+    "axios": "^0.21.1",
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "nodemon": "^2.0.7",
+    "pug": "^3.0.0"
   }
 }
diff --git a/rest/index.js b/rest/index.js
@@ -1,11 +1,26 @@
-const express = require('express')
-const app = express()
-const port = 3000
+// install nodemon to auto start server request instead of doing it manually. install with the followoing command: npm install -g nodemon
+// install pug: npm install pug --save
+// install middleware body parser: npm install body-parser --save
+// install middleware to read cookie data: npm install cookie-parser --save
 
-app.get('/', (req, res) => {
-  res.send('Hello World!')
+const express = require('express');
+const bodyParser = require('body-parser');
+const axios = require('axios');
+const cors = require('cors');
+const router = express.Router(); // <-- to use the router, replace all "app" with "router" : also, create a router folder and copy all route coding to the router folder
+
+const app = express();
+const port = 3000;
+
+//app.use(bodyParser.urlencoded( { extended: false }));
+app.use(cors());
+
+app.get('/pokemon/:id', async (req, res) => {
+  let pokemonId = req.params.id
+  let pokedexResponse = await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);
+  res.send(pokedexResponse);
 })
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
+  console.log(`Test to show that app is listening on http://localhost:${port}`)
 })
diff --git a/web/.DS_Store b/web/.DS_Store
diff --git a/web/img/bulbasaur.png b/web/img/bulbasaur.png
diff --git a/web/img/charmander.png b/web/img/charmander.png
diff --git a/web/img/charmeleon.png b/web/img/charmeleon.png
diff --git a/web/img/ivysaur.png b/web/img/ivysaur.png
diff --git a/web/img/venusaur.png b/web/img/venusaur.png
diff --git a/web/index.html b/web/index.html
@@ -3,9 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="pokemon.css">
+    <script src="index.js"></script>
+    <title>Pokedex</title>
 </head>
 <body>
-    <p>Hello Pokemon!</p>
+  <h1>Pokedex</h1>
+  <div id="cardGrid">
+
+
+  </div>
+
 </body>
 </html>
diff --git a/web/index.js b/web/index.js
@@ -0,0 +1,61 @@
+let id;
+let img;
+// let energyType = [ 
+//     'grass', 
+//     'lightning', 
+//     'darkness', 
+//     'fairy', 
+//     'fire', 
+//     'psychic', 
+//     'metal', 
+//     'dragon', 
+//     'water', 
+//     'fighting', 
+//     'colorless'
+// ];
+
+let details = new XMLHttpRequest();
+details.onreadystatechange = function() {
+    if (this.readyState === 4) {
+        document.getElementById('cardGrid').innerHTML = this.responseText;
+        //console.log(pokemonData);
+        // let charInfo = document.getElementById('charInfo');
+        // charInfo.innerHTML = this.responseText;
+    }
+}
+    //details.open('GET', 'http://localhost:3000/pokemon/id');
+    details.open('GET', 'https://pokeapi.co/api/v2/pokemon/1');
+    details.send();
+
+//function getPokemonData() {
+// let xhr = new XMLHttpRequest();
+// xhr.onreadystatechange = function() {
+//     if (xhr.readyState === 4) {
+//         let rolodex = JSON.parse(xhr.responseText);
+//         //const name = rolodex.results[0].name.toUpperCase();
+//         //let pokemon = document.getElementById('pokemon');
+//         //pokemon.innerHTML = this.responseText;
+//         console.log(rolodex);
+//     }
+// }
+//     //xhr.open('GET', 'http://localhost:3000/pokemon');
+//     xhr.open('GET', 'https://pokeapi.co/api/v2/pokemon/');
+//     xhr.send();
+
+
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ example code from dog api ~~~~~~~~~~~
+
+// function getRandomDoggiePic(){
+//     let xhr = new XMLHttpRequest();
+//     xhr.onreadystatechange = function() {
+//         if(this.readyState === 4 && this.status === 200) {
+//             document.getElementById("doggie").src = this.responseText;
+//         }
+//     }
+
+//     xhr.open("GET", "http://localhost:4000/dog/random")
+//     xhr.send();
+// }
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+//module.exports = router; // <-- this how you reference an external file, router is the declared argument in another file
diff --git a/web/pokemon.css b/web/pokemon.css