Skip to content

Instantly share code, notes, and snippets.

@IanSmith89
Last active June 23, 2016 17:31
Show Gist options
  • Save IanSmith89/f72743227a6db62a454374a39ebdc6b4 to your computer and use it in GitHub Desktop.
Save IanSmith89/f72743227a6db62a454374a39ebdc6b4 to your computer and use it in GitHub Desktop.

Given the pokemon_list data set, in a server.js file, implement an Express server that renders the following index.ejs template when visiting localhost:8000/pokemon.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>All Pokemon</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>Sprite</td>
          <td>Name</td>
          <td>Pokedex Number</td>
        </tr>
      </thead>
      <tbody>

        <!-- INSERT RENDERED DATA HERE -->
        
      </tbody>
    </table>
  </body>
</html>

http://expressjs.com/en/api.html#res.render http://expressjs.com/en/guide/using-template-engines.html

Hint: You’ll want to use a templating engine called EJS https://www.npmjs.com/package/ejs

Then, in the same file, render a different profile.ejs template when visiting localhost:8000/pokemon/:id

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Individual Pokemon</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td>Sprite</td>
          <td>Type</td>
          <td>Evolves From</td>
          <td>Pokedex Number</td>
        </tr>
      </thead>
      <tbody>

        <!-- INSERT RENDERED DATA HERE -->
        
      </tbody>
    </table>
  </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>All Pokemon</title>
</head>
<body>
<table>
<thead>
<tr>
<td>Sprite</td>
<td>Name</td>
<td>Pokedex Number</td>
</tr>
</thead>
<tbody>
<!-- INSERT RENDERED DATA HERE -->
</tbody>
</table>
</body>
</html>
let pokemon = [
{
id: 1,
name: 'Bulbasaur',
type: 'grass',
evolves_from: 'egg',
image_url: 'http://www.pokestadium.com/sprites/xy/bulbasaur.gif'
},
{
id: 2,
name: 'Ivysaur',
type: 'grass',
evolves_from: 'Bulbasaur',
image_url: 'http://www.pokestadium.com/sprites/xy/ivysaur.gif'
},
{
id: 3,
name: 'Venusaur',
type: 'grass',
evolves_from: 'Ivysaur',
image_url: 'http://www.pokestadium.com/sprites/xy/venusaur.gif'
},
{
id: 4,
name: 'Charmander',
type: 'fire',
evolves_from: 'egg',
image_url: 'http://www.pokestadium.com/sprites/xy/charmander.gif'
},
{
id: 5,
name: 'Charmeleon',
type: 'fire',
evolves_from: 'Charmander',
image_url: 'http://www.pokestadium.com/sprites/xy/charmeleon.gif'
},
{
id: 6,
name: 'Charizard',
type: 'fire',
evolves_from: 'Charmeleon',
image_url: 'http://www.pokestadium.com/sprites/xy/charizard.gif'
},
{
id: 7,
name: 'Squirtle',
type: 'water',
evolves_from: 'egg',
image_url: 'http://www.pokestadium.com/sprites/xy/squirtle.gif'
},
{
id: 8,
name: 'Wartortle',
type: 'water',
evolves_from: 'Squirtle',
image_url: 'http://www.pokestadium.com/sprites/xy/wartortle.gif'
},
{
id: 9,
name: 'Blastoise',
type: 'water',
evolves_from: 'Wartortle',
image_url: 'http://www.pokestadium.com/sprites/xy/blastoise.gif'
}
];
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Individual Pokemon</title>
</head>
<body>
<table>
<thead>
<tr>
<td>Sprite</td>
<td>Type</td>
<td>Evolves From</td>
<td>Pokedex Number</td>
</tr>
</thead>
<tbody>
<!-- INSERT RENDERED DATA HERE -->
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment