99 Little Bugs In the Code & Poke-Express

Here, we will build 3 small projects in one to keep learning express.

Getting Started

  • Fork this repo
  • git clone the forked repository
  • cd to the directory where you cloned it
  • npm install to install dependencies that are already included in the package.json
  • npm test to run the tests
  • npm install express dotenv to install new dependencies express and dotenv
  • touch app.js server.js .env
  • go into package.json and put server.js as the value for the key main

.env

PORT=8888

Note: Remember to git add, git commit and git push regularly

Submission Guidelines

  • When finished, commit and push your work.
  • Make a pull request on GitHub.

New Project Name Generator

Let's start with a simple activity. Make a route that takes 3 parameters in the URL

  • verb
  • adjective
  • noun

so that if the url is

http://localhost:8888/jumping/joyous/jellybean

The response will be

Congratulations on starting a new project called jumping-joyous-jellybean!

99 Little Bugs In the Code

99 little bugs in the code
99 little bugs
Pull one down
Patch it around
101 bugs in the code

Requirements

  • On the home page (get "/bugs"), users should see:
    • "99 little bugs in the code"
    • a link that says "pull one down, patch it around"
    • this should link to /bugs/101, where the number represents the number of bugs remaining to fix
  • When a number is given in the url (get "/bugs/:numberOfBugs"), users should see:
    • The number of bugs left in the code (i.e. 101 little bugs in the code)
    • a link to "pull one down, patch it around", where the href is number of bugs in the parameter plus 2
  • If there over 200 bugs left, do not show a link to "pull one down", rather, add a link to start over, which directs the user back to the home page

Hints

  • You should use an anchor tag with an href to link to the next 'page'

Poke-Express

In The Darkest Timeline: The Pokeapi has gone from free to $1 per API call!

You decide to take it upon yourself to create a new Pokemon API for all to share for free.

You have happened upon a strange pokemon.json file. Rumor has it that a mysterious person who goes by PyritePikachu scraped this data off the internet. It doesn't have anywhere near as much info as Pokeapi and it seems a bit outdated, but that's ok! It's a start!

Getting Started

Confirm you are able to bring in the data from the pokemon.json file

app.js

const pokemon = require("./pokemon.json");
console.log(pokemon[0]);

node app.js - to confirm you see an object with Bulbasaur's info.

  • make a route /pokemon that will show a list of all the pokemon

  • make a route /pokemon/:indexOfArray that returns 1 pokemon at that array position

    • if the array position is invalid or there is no pokemon at that position, instead send sorry, no pokemon found at /pokemon[indexOfArray] - where [indexOfArray] is the value from the URL that the user has entered
  • make a route /pokemon/search - where a user can add a query parameter such as http://localhost:8888/pokemon/search?name=oddish

    which will respond with

    {
    name: 'Oddish',
    img: 'http://img.pokemondb.net/artwork/oddish.jpg',
    type: [ 'Grass', 'Poison' ],
    stats: {
      hp: '45',
      attack: '50',
      defense: '55',
      spattack: '75',
      spdefense: '65',
      speed: '30'
    },
    damages: {
      normal: '1',
      fire: '2',
      water: '0.5',
      electric: '0.5',
      grass: '0.25',
      ice: '2',
      fight: '0.5',
      poison: '1',
      ground: '1',
      flying: '2',
      psychic: '2',
      bug: '1',
      rock: '1',
      ghost: '1',
      dragon: '1',
      dark: '1',
      steel: '1'
    },
    misc: {
      classification: 'weed pokemon',
      height: '1’08”',
      weight: '11.9',
      happiness: '70'
    }
    }
    
    

Bonus

  • Instead of just sending JSON, create new routes at /pokemon-pretty/ send some HTML
  • for all the pokemon, send an unordered list of anchor tags that link to the array position of the pokemon
  • in each individual view /pokemon-pretty/:indexOfArray of a pokemon, instead of JSON, display the name, image and any other info

HRRMMM, adding all this HTML as a string inside the routes is getting unweildly... is there a better way?

Bonus Bonus

  • Add search ability for other keys in the pokemon data.

  • Use <style></style> and put some CSS in there to style the page

  • Use create-react-app and figure out how to connect it to this backend (we'll teach you later on in the course how to do this)