Juanasaur - Grass and Poison

config/config.json

@@ -0,0 +1,7 @@
+{
+  "development": {
+    "database": "pokedex",
+    "host": "127.0.0.1",
+    "dialect": "postgres"
+  }
+}

db-test.js

@@ -0,0 +1,37 @@
+// Make sure to require your models in the files where they will be used.
+const db = require('./models');
+
+db.pokemon.create({
+    name: 'pikachu'
+   })
+   .then(poke => {
+     console.log('Created: ', poke.name)
+     db.pokemon.findOne({
+         where: {
+           name: 'pikachu'
+         }
+       })
+       .then(poke => {
+         console.log('Found: ', poke.name)
+       })
+       .catch(console.log)
+   })
+   .catch(console.log)
+
+// create some pokemon with async/await syntax
+async function createPokemon() {
+  try {
+    const newPokemon = await db.pokemon.create({ name: 'charizard' })
+    console.log('the new pokemon is:', newPokemon)
+    const foundPokemon = await db.pokemon.findOne({
+      where: {
+        name: 'charizard'
+      }
+    })
+    console.log('the found pokemon is:', foundPokemon)
+  } catch (err) {
+    console.log(err)
+  }
+}
+
+createPokemon()

index.js

@@ -1,13 +1,17 @@
 const express = require('express');
 const axios = require('axios'); 
 const ejsLayouts = require('express-ejs-layouts');
-
+const db = require('./models')
 const app = express();
 const port = process.env.PORT || 3000;
 
 app.set('view engine', 'ejs');
 app.use(express.urlencoded({ extended: false }));
 app.use(ejsLayouts);
+app.use(express.static('public'))
+
+const path = require('path')
+app.set('views', path.join(__dirname, 'views'));
 
 // GET / - main index of site
 app.get('/', (req, res) => {
@@ -20,6 +24,43 @@ app.get('/', (req, res) => {
   })
 });
 
+app.get('/pokemon', async (req, res) => {
+  try {
+    const allPokemon = await db.pokemon.findAll();
+    console.log(__dirname)
+    res.render('./pokemon/index.ejs', { pokemon: allPokemon });
+  } catch (err) {
+    console.log(err);
+    res.status(500).send('Internal Server Error');
+  }
+});
+
+app.post('/pokemon', async (req, res) => {
+  const { name } = req.body;
+  try {
+    const newPokemon = await db.pokemon.findOrCreate({ where: {name} });
+    console.log('Created new Pokemon:', newPokemon.name);
+    res.redirect('/pokemon');
+  } catch (err) {
+    console.log(err);
+    res.status(500).send('Internal Server Error');
+  }
+});
+
+
+app.get('/pokemon/:name', async (req, res) => {
+  const { name } = req.params
+  try {
+    const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`)
+    const pokemon = response.data;
+    res.render('pokemon/show', { pokemon })
+  } catch(err) {
+    console.log(err)
+    res.status(404).send('Pokemon not found')
+  }
+})
+
+
 // Imports all routes from the pokemon routes file
 app.use('/pokemon', require('./controllers/pokemon'));
 

migrations/20230404004021-create-pokemon.js

@@ -0,0 +1,28 @@
+'use strict';
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    await queryInterface.createTable('pokemons', {
+      id: {
+        allowNull: false,
+        autoIncrement: true,
+        primaryKey: true,
+        type: Sequelize.INTEGER
+      },
+      name: {
+        type: Sequelize.STRING
+      },
+      createdAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      },
+      updatedAt: {
+        allowNull: false,
+        type: Sequelize.DATE
+      }
+    });
+  },
+  async down(queryInterface, Sequelize) {
+    await queryInterface.dropTable('pokemons');
+  }
+};

models/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const Sequelize = require('sequelize');
+const basename = path.basename(__filename);
+const env = process.env.NODE_ENV || 'development';
+const config = require(__dirname + '/../config/config.json')[env];
+const db = {};
+
+let sequelize;
+if (config.use_env_variable) {
+  sequelize = new Sequelize(process.env[config.use_env_variable], config);
+} else {
+  sequelize = new Sequelize(config.database, config.username, config.password, config);
+}
+
+fs
+  .readdirSync(__dirname)
+  .filter(file => {
+    return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js');
+  })
+  .forEach(file => {
+    const model = require(path.join(__dirname, file))(sequelize, Sequelize.DataTypes);
+    db[model.name] = model;
+  });
+
+Object.keys(db).forEach(modelName => {
+  if (db[modelName].associate) {
+    db[modelName].associate(db);
+  }
+});
+
+db.sequelize = sequelize;
+db.Sequelize = Sequelize;
+
+module.exports = db;

models/pokemon.js

@@ -0,0 +1,23 @@
+'use strict';
+const {
+  Model
+} = require('sequelize');
+module.exports = (sequelize, DataTypes) => {
+  class pokemon extends Model {
+    /**
+     * Helper method for defining associations.
+     * This method is not a part of Sequelize lifecycle.
+     * The `models/index` file will call this method automatically.
+     */
+    static associate(models) {
+      // define association here
+    }
+  }
+  pokemon.init({
+    name: DataTypes.STRING
+  }, {
+    sequelize,
+    modelName: 'pokemon',
+  });
+  return pokemon;
+};

public/css/styles.css

@@ -0,0 +1,11 @@
+body {
+    background-color: gray;
+}
+
+a {
+    color: gray;
+}
+
+a:visited {
+    color: rgb(9, 9, 9);
+}

views/index.ejs

@@ -1,12 +1,14 @@
 <div class="container">
   <h1 class="text-center">The Original 151 Pokemon</h1>
   <p class="text-center">
+    <a href="/">Home</a>
     <a href="/pokemon">Favorites</a>
+
   </p>
 
   <% pokemon.forEach(function(pokemon) { %>
     <div class="well">
-      <h2><%= pokemon.name %></h2>
+      <h2><a href="/pokemon/<%= pokemon.name %>"><%= pokemon.name %></a></h2>
       <form method="POST" action="/pokemon">
         <input hidden type="text" name="name" value="<%= pokemon.name %>">
         <button class="btn btn-primary" type="submit">Add to Favorite Pokemon</button>

views/layout.ejs

@@ -7,6 +7,7 @@
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/styles.css">
   </head>
   <body>
     <%- body %>

views/pokemon/index.ejs

@@ -0,0 +1,14 @@
+<div class="container">
+  <h1 class="text-center">The Original 151 Pokemon</h1>
+  <p class="text-center">
+    <a href="/">Home</a>
+    <a href="/pokemon">Favorites</a>
+
+  </p>
+
+  <% pokemon.forEach(function(pokemon) { %>
+    <div class="well">
+      <h2><%= pokemon.name %></h2>
+    </div>
+  <% }); %>
+</div>

views/pokemon/show.ejs

@@ -0,0 +1,41 @@
+<div class="container">
+  <h1 class="text-center">The Original 151 Pokemon</h1>
+  <p class="text-center">
+    <a href="/">Home</a>
+    <a href="/pokemon">Favorites</a>
+
+  </p>
+
+
+      <h2><%= pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)%></h2>
+
+
+      <h3>Types:</h3>
+      <ul>
+        <% pokemon.types.forEach((type) => { %>
+         <li> <%= type.type.name %></li>
+       <% }) %>
+      </ul>
+
+      <h3><img src="<%= pokemon.sprites.front_default %>"</h3>
+      <h3>Abilities:</h3>
+      <ul>
+        <% pokemon.abilities.forEach((ability) => { %>
+         <li> <%= ability.ability.name %></li>
+       <% }) %>
+      </ul>
+      <h3>Base Stats:</h3>
+      <ul>
+        <% pokemon.stats.forEach((stat) => { %>
+          <li> <%=  stat.stat.name  %>: <%= stat.base_stat %></li>
+          <% }) %>
+      </ul>
+      <h3>Moves:</h3>
+      <ul>
+        <% pokemon.moves.forEach((move) => { %>
+          <li> <%=  move.move.name  %></li>
+          <% }) %>
+      </ul>
+
+
+</div>