rundiye/lab-ironbeers

IronBeers

Introduction

In this lab you will create a web app where the user will be able to see a list of beers or check one randomly. For the exercise, we will work with the PunkAPI database, through it's NPM Package. The package has some methods that retrieve beers with some info about them and fits perfect for our example.

⚠️ Notice that this setup has handlebars as a view engine. If you are to use some other view engine (like ejs) you have to install that package and edit your app.js manually.

Requirements

• Fork this repo

Purpose

• Create a basic web app, where you can Check the beers or get a random beer.
• Use PunkAPI Database

Submission

• Upon completion, run the following commands

$ git add .
$ git commit -m "done"
$ git push origin master

• Create Pull Request so your TAs can check up your work.

Instructions

Iteration 1 - Layout

First, we need to create our layout.

Inside the views folder, create a layout file. Our layout should look like this:

You will find the colors and fonts on the css file. Remember to link the css file to your main layout.

The navbar includes three elements:

• Home. ----> Should navigate to /.
• Beers. ----> Should navigate to /beers.
• Random Beer. ----> Should navigate to /random-beers.

Iteration 2 - The Index

In the index view file you should include the beer image you have on the /public/images, with two buttons: Check the Beers! and Check a Random Beer. Both should navigate to the same routes we have on our nav.

Iteration 3 - The Beers Route

Create a /beers route inside the app.js file. You will also need a beers view file to render every time we call this route.

Inside the /beers route, call to the getBeers() method of our PunkAPI package. The package will return you an array of 25 beers, and you should pass that array to the beers view.

punkAPI.getBeers()
  .then(beers => {

  })
  .catch(error => {
    console.log(error)
  })

Remember you should call the render method after getting the beers from our package. That means, inside the then.

Iteration 4 - Beers Views

In the beers view, loop over the beers array. On every iteration, you should call a partial passing the info about each beer.

Iteration 5 - Beer Partial

Since each beer will be displayed in the same way, you should create a partial to display each beer. First, we need to register where our partials will be located. So you need to add the following code to the app.js file:

hbs.registerPartials(__dirname + '/views/partials')

Now, you should create a partials folder inside the views, and beerPartial file inside the partials folder. Our beerPartial will display an image, name, description, and tagline of the beer. It should look like the following:

After creating the partial, and loop over the array of beers, on our /beers route, we should have the following:

Iteration 6 - Random Beer

Finally, let's create our /random-beer route. Inside our route you should call the getRandom() method of the PunkAPI package and after receiving the info, render the randomBeer file and pass the data of the beer.

punkAPI.getRandom()
  .then(beers => {

  })
  .catch(error => {
    console.log(error)
  })

On the randomBeer you should print the random beer you get. You should display an image, name, description, tagline, food pairing and brewer tips. It should look like the following:

Happy Coding! ❤️