/lab-ironbeers

Primary LanguageHTML

logo_ironhack_blue 7

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.

Requirements

  • Fork this repo
  • Then clone this repo.

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

Our starter code brings the basic configuration to run our server. The / route is set to render the index file, but first, we need to create our layout.

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

image

You will find the colors and fonts on the css file. Remember to add the {{{ body }}} and 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

On the index.hbs 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.

image

Iteration 3 - The Beers Route

Create a /beers route inside the app.js file. You will also need a beers.hbs 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.hbs 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

On the beers.hbs view, loop over the beers array using the {{#each beers}} {{/each}} block helper. 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.hbs file inside the partials folder. Our beerPartial.hbs will display an image, name, description, and tagline of the beer. It should look like the following:

image

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

image

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.hbs file and pass the data of the beer.

punkAPI
  .getRandom()
  .then(beers => {
    // ...
  })
  .catch(error => {
    console.log(error);
  });

On the randomBeer.hbs 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:

image

Happy Coding! ❤️