Code Monkey home page Code Monkey logo

pokedex-express's Introduction

Pokedex Express App

We will build our first web app using Node.js and Express - a Pokedex app.

For this exercise, we will be setting up express to intercept incoming requests on certain routes, reading data from a JSON file, and responding to HTTP requests with simple strings, JSON, or full HTML pages.

Getting Started

  1. Fork and clone this repository to your computer
  2. Run yarn install to install dependencies
  3. Look in the starter file called index.js. This will be the entry-point to your app
  4. Run node index.js to start a local server on port 3000
  5. Open localhost:3000 on your browser and see the home page

Additionally, to improve your workflow, install the nodemon package. Nodemon helps us restart our local server every time it detects a "save" event on index.js. Neat stuff.

# install nodemon in Terminal
yarn global add nodemon

# run nodemon to start server
nodemon index.js

Note on comments:

The comments in this file are deliberately verbose meant to orientate you to an Express app for the first time. Feel free to remove any or all comments.

Deliverables

Use the data in pokedex.json and return a response with details about the requested Pokemon. Specifically:

  • Go through pokedex.json to understand how the data is structured. Where are all the pokemon data stored? (As usual, using a JSON parser for human-readable JSON is a good idea. There are many, here is one.)

  • Return a string response "Welcome to the online Pokedex!" when a request for the root route (/) is received

  • Return a string response with the requested pokemon's information when a request comes with matching the route /names/:name (eg. localhost:3000/names/Bulbasaur should show Bulbasaur's information - for now, show only its weight value)

  • Modify your response for /names/:name to return a HTML page (instead of just a string) with a h1 tag that displays the name of the pokemon being requested, and a ul displaying its weight (eg. "Weight: 10 kg")

Further

  • Handle the case where an invalid pokemon name is provided (eg. /names/Deadpool). Return a HTML page with a p tag that says "Could not find information about <pokemon_name> - Is that a new pokemon? Gotta catch em' all!" (replace <pokemon_name> with the requested for pokemon name)

  • Modify your response for / (homepage) to return a HTML page with a h1 tag saying "Welcome to the online Pokdex!" and a ul displaying all the pokemon that exist in the pokedex

  • Instead of showing just the weight, show all the details of the requested pokemon for /names/:name route, adding each detail as a li to the ul

  • Expose a new route for /types/:type that returns a HTML page with a ul listing the names of all pokemon that have the specified type (eg. /types/grass should show a page with names of all pokemon of grass type). Format it however you like on the page.

pokedex-express's People

Contributors

nickangtc avatar awongh avatar 1ung avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.