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.
- Fork this repo
- Create a basic web app, where you can Check the beers or get a random beer.
- Use PunkAPI Database
- 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.
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
.
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.
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
.
In the beers
view, loop over the beers array. On every iteration, you should call a partial
passing the info about each beer.
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:
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! ❤️