code-differently · rswoodruff · Mar 1, 2021 · Mar 1, 2021 · Mar 1, 2021 · Mar 15, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/data/schema.sql b/data/schema.sql
@@ -0,0 +1,38 @@
+Run once to setup MySQL
+ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
+flush privileges;
+
+create database pokedex;
+
+use pokedex;
+
+CREATE TABLE pokemon (
+	pokemon_id INT PRIMARY KEY NOT NULL,
+    name VARCHAR(255) NOT NULL,
+    color VARCHAR(255),
+    type VARCHAR(255),
+    type2 VARCHAR(255),
+    weakness VARCHAR(255)
+    );
+
+CREATE TABLE types (
+	type_id INT PRIMARY KEY NOT NULL auto_increment,
+    type VARCHAR(255) NOT NULL,
+    FOREIGN KEY (type_id) REFERENCES pokemon_type(type_id)
+);
+
+CREATE TABLE pokemon_type (
+	pokemon_type_id INT PRIMARY KEY NOT NULL auto_increment,
+    type_id INT NOT NULL,
+	pokemon_id INT NOT NULL,
+    FOREIGN KEY (pokemon_id) REFERENCES pokemon(pokemon_id),
+    FOREIGN KEY (type_id) REFERENCES types(type_id)
+);
+
+ALTER TABLE pokemon_type ADD FOREIGN KEY(pokemon_id) REFERENCES pokemon(pokemon_id);
+ALTER TABLE pokemon_type ADD FOREIGN KEY(type_id) REFERENCES types(type_id);
+
+INSERT INTO pokemon (pokemon_id, name, color, weakness) VALUES (10, 'Caterpie', 'Green', 'Fire');
+UPDATE pokemon SET weakness = 'Grass' WHERE name = 'Blastoise';
+
+SELECT * FROM pokemon;
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,8 @@
   },
   "homepage": "https://github.com/code-differently/Pokedex-App#readme",
   "dependencies": {
-    "express": "^4.17.1"
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "mysql": "^2.18.1"
   }
 }
diff --git a/rest/index.js b/rest/index.js
@@ -1,11 +1,36 @@
-const express = require('express')
-const app = express()
-const port = 3000
+const password = "************" // removed actual password for lab submission
+const express = require('express');
+const app = express();
+const cors = require('cors');
+const mysql = require('mysql');
+const port = 3000;
 
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-})
+app.use(cors());
+
+let con = mysql.createConnection({
+  host: "localhost",
+  user: "root",
+  password: password,
+  database: "pokedex"
+});
+
+app.get('/pokedex', async (req, res) => {
+  con.connect(err => {
+    if(err) {
+      throw err;
+    }
+    con.query("SELECT * FROM pokemon", (err, result, fields) => {
+      if (err) {
+        throw err;
+      }
+      //console.log(result);
+      res.send(result)
+      con.end(); // ends the connection after querry request
+      //return result;
+    })
+  });
+});
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
+  console.log(`Listening on http://localhost:${port}/pokedex`)
 })
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>Pokemon Rolodex</title>
 </head>
 <body>
-    <p>Hello Pokemon!</p>
+    <p>Please see the data you requested below...</p>
+    <div id="pokemons"></div>
+
+    <script src="index.js"></script>
 </body>
 </html>
diff --git a/web/index.js b/web/index.js
@@ -0,0 +1,12 @@
+//Using fetch with an arrow function
+fetch('http://localhost:3000/pokedex')
+    .then( res => res.json() )
+    .then(pokemons => {                                                         //2nd callback name.column_name
+        document.getElementById("pokemons").innerHTML = pokemons.map(pokemon => `<div>ID: ${pokemon.pokemon_id} | Name: ${pokemon.name} | Color: ${pokemon.color} | Weakness: ${pokemon.weakness}</div>`).join("") });
+
+//Using fetch with an anonymous self-invoking function
+// fetch('http://localhost:3000/pokedex')
+//     .then(function(res) {
+//         res.json()
+//     .then(pokemons => {                                                            //2nd callback name.column_name
+//            document.getElementById("pokemons").innerHTML = pokemons.map(pokemon => `<div>ID: ${pokemon.pokemon_id} | Name: ${pokemon.name} | Color: ${pokemon.color} | Weakness: ${pokemon.weakness}</div>`).join("") });