From d43f9a87577ca14d19e5e8452404dbf671daae43 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Mon, 3 Apr 2023 20:06:52 -0600 Subject: [PATCH 1/4] Setup --- config/config.json | 7 ++++ db-test.js | 37 +++++++++++++++++++++ migrations/20230404004021-create-pokemon.js | 28 ++++++++++++++++ models/index.js | 37 +++++++++++++++++++++ models/pokemon.js | 23 +++++++++++++ 5 files changed, 132 insertions(+) create mode 100644 config/config.json create mode 100644 db-test.js create mode 100644 migrations/20230404004021-create-pokemon.js create mode 100644 models/index.js create mode 100644 models/pokemon.js diff --git a/config/config.json b/config/config.json new file mode 100644 index 00000000..cc42d587 --- /dev/null +++ b/config/config.json @@ -0,0 +1,7 @@ +{ + "development": { + "database": "pokedex", + "host": "127.0.0.1", + "dialect": "postgres" + } +} diff --git a/db-test.js b/db-test.js new file mode 100644 index 00000000..5045f8ad --- /dev/null +++ b/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() \ No newline at end of file diff --git a/migrations/20230404004021-create-pokemon.js b/migrations/20230404004021-create-pokemon.js new file mode 100644 index 00000000..b435d928 --- /dev/null +++ b/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'); + } +}; \ No newline at end of file diff --git a/models/index.js b/models/index.js new file mode 100644 index 00000000..53040a00 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/models/pokemon.js b/models/pokemon.js new file mode 100644 index 00000000..d6eae406 --- /dev/null +++ b/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; +}; \ No newline at end of file From 22ffa2aa13be2407770d8d8896ea078cce8c2304 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Mon, 3 Apr 2023 22:08:54 -0600 Subject: [PATCH 2/4] Getting to favorite --- index.js | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 77cdf635..d45ae319 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,7 @@ 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; @@ -9,6 +9,9 @@ app.set('view engine', 'ejs'); app.use(express.urlencoded({ extended: false })); app.use(ejsLayouts); +const path = require('path') +app.set('views', path.join(__dirname, 'views')); + // GET / - main index of site app.get('/', (req, res) => { // TODO: use updated url http://pokeapi.co/api/v2/pokemon/?offset=0&limit=151 @@ -20,6 +23,30 @@ app.get('/', (req, res) => { }) }); +app.get('/pokemon', async (req, res) => { + try { + const allPokemon = await db.pokemon.findAll(); + console.log(__dirname) + res.render('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.create({ name }); + console.log('Created new Pokemon:', newPokemon.name); + res.redirect('/pokemon'); + } catch (err) { + console.log(err); + res.status(500).send('Internal Server Error'); + } +}); + + // Imports all routes from the pokemon routes file app.use('/pokemon', require('./controllers/pokemon')); From b91790f3239e4921f8bdef0eccbcbe537096fe5d Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Mon, 3 Apr 2023 23:57:40 -0600 Subject: [PATCH 3/4] Updated with Deliverable 4 --- index.js | 18 ++++++++++++++++-- public/css/styles.css | 3 +++ views/index.ejs | 1 + views/layout.ejs | 1 + views/pokemon/index.ejs | 13 +++++++++++++ views/pokemon/show.ejs | 40 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 public/css/styles.css create mode 100644 views/pokemon/index.ejs create mode 100644 views/pokemon/show.ejs diff --git a/index.js b/index.js index d45ae319..df007bcf 100644 --- a/index.js +++ b/index.js @@ -8,6 +8,7 @@ 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')); @@ -27,7 +28,7 @@ app.get('/pokemon', async (req, res) => { try { const allPokemon = await db.pokemon.findAll(); console.log(__dirname) - res.render('index.ejs', { pokemon: allPokemon }); + res.render('./pokemon/index.ejs', { pokemon: allPokemon }); } catch (err) { console.log(err); res.status(500).send('Internal Server Error'); @@ -37,7 +38,7 @@ app.get('/pokemon', async (req, res) => { app.post('/pokemon', async (req, res) => { const { name } = req.body; try { - const newPokemon = await db.pokemon.create({ name }); + const newPokemon = await db.pokemon.findOrCreate({ where: {name} }); console.log('Created new Pokemon:', newPokemon.name); res.redirect('/pokemon'); } catch (err) { @@ -47,6 +48,19 @@ app.post('/pokemon', async (req, res) => { }); +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')); diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 00000000..c4c5f5a1 --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,3 @@ +body { + background-color: gray; +} \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index e5c0ff30..932c96ae 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -2,6 +2,7 @@

The Original 151 Pokemon

Favorites + Home

<% pokemon.forEach(function(pokemon) { %> diff --git a/views/layout.ejs b/views/layout.ejs index cf20551c..e4abf26d 100644 --- a/views/layout.ejs +++ b/views/layout.ejs @@ -7,6 +7,7 @@ + <%- body %> diff --git a/views/pokemon/index.ejs b/views/pokemon/index.ejs new file mode 100644 index 00000000..5291879f --- /dev/null +++ b/views/pokemon/index.ejs @@ -0,0 +1,13 @@ +
+

The Original 151 Pokemon

+

+ Favorites + Home +

+ + <% pokemon.forEach(function(pokemon) { %> +
+

<%= pokemon.name %>

+
+ <% }); %> +
diff --git a/views/pokemon/show.ejs b/views/pokemon/show.ejs new file mode 100644 index 00000000..cea0ab0b --- /dev/null +++ b/views/pokemon/show.ejs @@ -0,0 +1,40 @@ +
+

The Original 151 Pokemon

+

+ Favorites + Home +

+ + +

<%= pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)%>

+ + +

Types:

+
    + <% pokemon.types.forEach((type) => { %> +
  • <%= type.type.name %>
    • + <% }) %> +
+ +

+

Abilities:

+
    + <% pokemon.abilities.forEach((ability) => { %> +
  • <%= ability.ability.name %>
    • + <% }) %> +
+

Base Stats:

+
    + <% pokemon.stats.forEach((stat) => { %> +
  • <%= stat.stat.name %>: <%= stat.base_stat %>
    • + <% }) %> +
+

Moves:

+
    + <% pokemon.moves.forEach((move) => { %> +
  • <%= move.move.name %>
    • + <% }) %> +
+ + +
From c0bbb1771df8388946c828c99d201f1aa2077e38 Mon Sep 17 00:00:00 2001 From: juanedcabrera Date: Tue, 4 Apr 2023 00:06:28 -0600 Subject: [PATCH 4/4] All deliverables + link + nav --- public/css/styles.css | 8 ++++++++ views/index.ejs | 5 +++-- views/pokemon/index.ejs | 3 ++- views/pokemon/show.ejs | 5 +++-- 4 files changed, 16 insertions(+), 5 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index c4c5f5a1..baa2b23f 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,11 @@ body { background-color: gray; +} + +a { + color: gray; +} + +a:visited { + color: rgb(9, 9, 9); } \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 932c96ae..211ca16c 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -1,13 +1,14 @@

The Original 151 Pokemon

- Favorites Home + Favorites +

<% pokemon.forEach(function(pokemon) { %>
-

<%= pokemon.name %>

+

<%= pokemon.name %>

diff --git a/views/pokemon/index.ejs b/views/pokemon/index.ejs index 5291879f..33bce1bc 100644 --- a/views/pokemon/index.ejs +++ b/views/pokemon/index.ejs @@ -1,8 +1,9 @@

The Original 151 Pokemon

- Favorites Home + Favorites +

<% pokemon.forEach(function(pokemon) { %> diff --git a/views/pokemon/show.ejs b/views/pokemon/show.ejs index cea0ab0b..9983b419 100644 --- a/views/pokemon/show.ejs +++ b/views/pokemon/show.ejs @@ -1,8 +1,9 @@

The Original 151 Pokemon

- Favorites Home + Favorites +

@@ -16,7 +17,7 @@ <% }) %> -

+

Abilities:

    <% pokemon.abilities.forEach((ability) => { %>