No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md

README.md

GA Logo

POKE EXPRESS

Make a Pokemon app that displays data inside server-side rendered views.

App

User Stories - Part 1

  • When a user goes to the '/pokemon' route they will see an index of pokemon: the names of each pokemon rendered to the page.
  • When a user clicks on the name of the pokemon, they will be taken to that pokemon's show page, and will see the pokemon's name and image.

Set up your server

Create an express app that listens on port 3000.

It'll be up to you to make sure you have the right modules installed. You can refer back to old code and lessons, but try to recall the necessary steps before checking in old code.

Careful with .gitignore and node_modules

Remember: Read the output of your git commands thoroughly. You should be able tell pretty easily if you accidentally git add, or git commit the node_modules.

If you git add your node_modules, then un-stage the files, and .gitignore them.

If you commit your node_modules, git reset your file tree and .gitignore them.

Or just delete and restart the project -- at that point all you'd have done is just npm init and npm install express etc, anyway... so not a big deal to re-do it.

The goal: Don't commit or push node_modules.


🔴 The commit message should read:

"My server is set up and running"

... but from now on, come up with your own commit messages. Remember, it should describe what the app does now that it didn't do before in about 12 words or less.


Set up your 'database'

  • Create a file in a models directory called pokemon.js
  • Inside of this file, put the following array of pokemon objects. This is your 'database' for tonight's homework.
const pokemon = [ 
  {
    name: "Bulbasaur", 
    img: "http://img.pokemondb.net/artwork/bulbasaur.jpg"
  },
  {
    name: "Ivysaur", 
    img: "http://img.pokemondb.net/artwork/ivysaur.jpg"
  },
  {
    name: "Venusaur", 
    img: "http://img.pokemondb.net/artwork/venusaur.jpg"
  },
  {
    name: "Charmander", 
    img: "http://img.pokemondb.net/artwork/charmander.jpg"
  },
  {
    name: "Charizard", 
    img: "http://img.pokemondb.net/artwork/charizard.jpg"
  },
  {
    name: "Squirtle", 
    img: "http://img.pokemondb.net/artwork/squirtle.jpg"
  },
  {
    name: "Wartortle", 
    img: "http://img.pokemondb.net/artwork/wartortle.jpg"
  }
];
  • Set up your 'database' so that it can be exported to your server.js and then be required by your server.js

  • Create a get route /pokemon that will res.send(pokemon), which will display your pokemon data as json in the browser


🔴 Commit.

Set up your index view

  • Instead of displaying json at your /pokemon route, you should serve an index.ejs file that displays a list of all the pokemon. Put the pokemon inside a <ul> with class name pokemon.

  • Add some style to your list with a style tag, or, for an added challenge, look up how to serve static files in an express app and use a separate CSS file instead.

  • Stretch step, not required: Choose a google font and add it to your html and inside your <style> tag. Google fonts are dope and easy to use.


🔴 Commit.

Set up your show route

  • Inside your server.js, add a new get route /pokemon/:id
  • This route should serve a template called show.ejs which displays the information of a specific pokemon according to their index in the pokemon array. For example, /pokemon/0 should display the 0-indexed pokemon.
  • You may want to look up how to access route parameters in express.

🔴 Commit.

Link your index.ejs to your show.ejs and vice versa

Inside your index.ejs,

  • For each pokemon, add a link to that pokemon's show page; this should be built dynamically with ejs.

  • When you click the link you should be taken to the show page for a specific pokemon.

Inside show.ejs

  • Add a link back to the index. So it, you know, behaves like a real site :)

🔴 Commit.

Style your app, step 1: static

  • Set up your app to be able to use CSS like we did in class. Use a dummy (i.e. just set a background color) CSS declaration. Remember: you need express.static() middleware. (also remember that you don't need to npm install anything for this particular middleware because its part of express. But for others you do.)

🔴 Commit.

Style your app


🔴 Commit

You finished! Nice work. Submit your homework

You can run npm test to confirm your app's functionality matches specs- be sure to export the app at the bottom of your server file so the tests can import it.

Part Two

Complete CRUD functionality

Set up routes and templates to allow for full CRUD functionality.

  • Users should be able to insert a new pokemon into the array using a form on a new.ejs page. Creation should be handled via a POST route to the /pokemon route.
  • Users should be able to edit an individual pokemon on an edit.ejs page accessed from the /pokemon/:id/edit route. The updating should be handled via a POST request to the /pokemon/:id route.
  • Users should be able to delete a pokemon using a button provided on the show and index pages.
  • The final app should have what are known as the 7 RESTful routes.
  • Do several commits even though you're not being explicitly told to.

Hungry for more?

  1. Style your application with flexbox, or Bootstrap!, a CSS library created by Twitter to make using the 960px grid system a little easier. Or there's a substantially more lightweight 960px-grid-system-based answer to Bootstrap called Skeleton. You could also jazz up your app by adding some hand-rolled flourishes with CSS animations, and/or some sweet client-side jQuery and/or ....??? u pick???.....!

  2. Learn more about Pseudo Selectors to become a CSS Genius

  1. Sign up for Code Wars and/or HackerRank and/or Project Euler and try out a challenge (or a few!) in order to keep honing your JavaScript skills! These are the same types of questions people ask in interview coding challenges.