Original creators: WDI-Lettuce, WDIR-Panthalassa, Thom Page
Adapted by: Kristyn Bryan
Further Adaptations by: Karolin Rafalski and Reuben Ayres
Competencies: Practicing Index and Show pages
Prerequisites: Javascript, Express, Routes, Node
Make a Pokemon app that displays data inside server-side rendered views.
User Stories
- 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.
In terminal:
-
create your homework directory structure as follows:
mkdir pokemon_app
cd pokemon_app
mkdir views
touch views/index.ejs
touch views/show.ejs
mkdir models
touch models/pokemon.js
touch server.js
npm init
- follow
npm init
prompts - Does npm init create a file? If it does, where does it create the file? What is the name of the file?
- follow
subl .
(Sierra: open the whole folder structure from the file->open menu)
🔴 The commit message should read:
"Commit 1 - All my files are created"
In terminal:
-
Make sure that you are on the same directory level as your
package.json
(why?) -
npm install express ejs
(installing multiple packages at once) -
check your
package.json
🔴 The commit message should read:
"Commit 2 - All my npm packages are added"
- in
server.js
set up your server - require express
- set
express()
to a variable - set a variable of
PORT
to3000
- set your app to listen to the port and include a console log, so that you can tell when your server is running
- include a get route
/
that willres.send('Welcome to the Pokemon App!');
So that when you got tolocalhost:3000
, you will seeWelcome to the Pokemon App!
- In terminal
nodemon
ornodemon server.js
(if you set your up yourpackage.json
to startserver.js
you don't need to put it afternodemon
)- GOTCHA! : nodemon will only work if you run it from the same location as your
package.json
- In the browser
- go to
localhost:3000
- check that you have your
Welcome to the Pokemon App!
message displaying
🔴 The commit message should read:
"Commit 3 - My server is set up and running"
- You have created a file 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 yourserver.js
- set this 'database' to a variable callled
pokemon
in yourserver.js
file - create a get route
/pokemon
that willres.send(pokemon)
, which will display your pokemon data as json in the browser
🔴 The commit message should read:
"Commit 4 - Connected my database, can see json in the browser"
- Instead of displaying json at your
/pokemon
route, you should serve theindex.ejs
file you created that will display your pokemon - You will have to set up your ejs file
- Start with your html boilerplate code
- Add an
<h1>
that describes this page, i.e. 'See All The Pokemon!' - Add a
<style>
tag so you can write some CSS directly in your html file. More info - In the Hungry for More section - you can work on properly linking a CSS file. - Add a background-color and text color to the body, inside your
<style>
tag to be sure it is working as expected. Example:
<style type="text/css">
body {
color: blanchedalmond;
background-color: steelblue;
}
</style>
- Stretch step, not required : Choose a google font and add it to your html and inside your
<style>
tag - Change your
/pokemon
route tores.render
yourindex.ejs
file - In your browser, go to
localhost:3000/pokemon
and be sure to see yourindex.ejs
view with h1 tag
🔴 The commit message should read:
"Commit 5 - index.ejs view rendered at pokemon route"
- continue working on your
index.ejs
view so that you can see:- the name of each pokemon, as a list item, inside an unordered list
- this list should be dynamically rendered by ejs based on your data from your 'database'
🔴 The commit message should read:
"Commit 6 - I can view a list of all my pokemon in the browser "
- Inside your
server.js
, add a new get route/pokemon/:id
- That will
res.send(req.params.id);
- So, when you go to
localhost:3000/pokemon/whatever
whatever
will show up in the browser
🔴 The commit message should read:
"Commit 7 - show view shows req.params.id "
- inside your
index.ejs
, - for each pokemon, add an
<a>
tag that will have anhref
that goes to the route/pokemon/x
, where x is the array position of thepokemon
in the data array. This should be set dynamically with ejs - when you click the link you should go to your show route and the index number corresponding to the pokemon's array position should be displayed
🔴 The commit message should read:
"Commit 8 - added dynamic anchor tags to index.ejs "
- copy/paste your code from your
index.ejs
into yourshow.ejs
(surely, there must be a better way; are you wondering if there is something in the hungry for more section about this?) - change all your html code inside your
show.ejs
file's<body>
so that- your h1 tag says "Gotta Catch 'Em All"
- add an h2 tag that will display the name of the pokemon
- add an image tag that will display an image of the pokemon
- add an anchor tag with the text of
back
, that will take you back to yourindex.ejs
view
- update the route in the server.js to render the show view with the pokemon data
🔴 The commit message should read:
"Commit 9 - created show views of each pokemon "
- 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.)
🔴 The commit message should read:
"Commit 10 - set up serving of static files so we can add CSS"
-
Set up gulp to compile LESS (like in class) and have it spit out the CSS file to your static files area you just set up.
-
Pro tip: you might like to open third terminal tab where you keep gulp running (one for nodemon, one for gulp, and one for regular terminal stuff like making files and doing git adds/commits/pushes)
🔴 The commit message should read:
"Commit 11 - added gulp and configured it to compile LESS"
-
Update the appearance of your app with css.
🔴 The commit message should read:
"Commit 12 - Styled app with LESS"
-
Style your application with flexbox, or if you really need a good rabbit hole--check out 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 jQuery and/or ....??? u pick???.....!
-
Learn more about Pseudo Selectors to become a CSS Genius
- pseudo selector links ~ 5 minutes
- pseudo selector children ~ 4 minutes
- pseudo selector n-th child ~ 3 minutes
- pseudo selector sibling status and
not()
~ 5 minutes - a little glitchy, but See just how deeply nerdy some people get about CSS
-
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!