diff --git a/unit_02/w05d02/homework/Pokeman_Starter/homework_instructions.md b/unit_02/w05d02/homework/Pokeman_Starter/homework_instructions.md new file mode 100644 index 0000000..18fead9 --- /dev/null +++ b/unit_02/w05d02/homework/Pokeman_Starter/homework_instructions.md @@ -0,0 +1,47 @@ +# POKE EXPRESS TWO + +![eh](http://orig10.deviantart.net/54d7/f/2013/265/a/b/w_by_professorlayton22-d6nd2yl.jpg) + +Make a Pokemon app that displays data inside server-side rendered views. + +## App + +- 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 a pokemon image, they will be taken to that pokemon's `show` page, and will see the pokemon's name and image. + +### Structure + +The views folder is empty, and it's up to you to make the appropriate folders and files within it. + + +### Directions + +- In the root of the project, `npm init`. This will give you a `package.json` +- `npm install --save express` +- in `server.js` set up your server according to the prompts + - `npm install --save ejs` + +Your `server.js` will have two routes, one for displaying an index of all the pokemon, and one for showing a single pokemon according to the user's input. + +- Make the views. Make sure you installed ejs. + +### Views + +In your views folder, first, make a `show.ejs` view. The purpose of this view to show a single pokemon. The pokemon that is showed depends on the user's input in the url bar. + +Example, if the user writes `pokemon/0` in the url bar, they will go to the page that displays the pokemon at index 0 in the `pokemon` array. + +This view will show the data of a single pokemon. Using ejs, this view should display: + - The pokemon's name + - The image of the pokemon + + +Next, make your `index.ejs` view. + +This view will show only the names of each pokemon. All 151 images. (You'll need to use a loop in the ejs). + + +## BONUS +When the user clicks on a pokemon's name, they will be taken to that pokemon's show page. You can use an `` tag to accomplish this. + + \ No newline at end of file diff --git a/unit_02/w05d02/homework/Pokeman_Starter/server.js b/unit_02/w05d02/homework/Pokeman_Starter/server.js new file mode 100644 index 0000000..2350cb9 --- /dev/null +++ b/unit_02/w05d02/homework/Pokeman_Starter/server.js @@ -0,0 +1,26 @@ +// SET UP EXPRESS + + +// dummy data: +var 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"} + ]; + +// app.listen on port 3000 + + +// app.get '/', and send all the data to the 'index.ejs' view +// >> the index.ejs view will display all the names. + + +// app.get '/:id', and send the specific pokemon's data to be rendered +// on the 'show.ejs' view. In this case, the :id will be used to refer to +// the index of the pokemon in the pokemon.js array. Remember req.params. +// >> the show.ejs view will show both the pokemon's name and its image. + + diff --git a/unit_02/w05d02/homework/Pokeman_Starter/views/.gitkeep b/unit_02/w05d02/homework/Pokeman_Starter/views/.gitkeep new file mode 100644 index 0000000..e69de29