/Punk-Beers

Search for different Punk Beers and receive information about each beer!

Primary LanguageJavaScript

Punk Api Challenge

Your task is to build a site to the wireframe below:

Wireframe

There is a file called data/beers.js which contains all the data you will need for the task. Please refer to Mealworm as well as the sandbox apps we built together over the last two days!

Challenge - Black Borders

All the wireframe content in black is part of the main challenge - that is, the sidenav, the main section containing the beers and beer cards for each piece of data. Here is a component tree to help you get started - you only need the section in black:

Component Tree

Extension 1 - SearchBox (Blue borders/lines)

Once you've got the design and layout sorted to render the elements, it's time to add some search functionality. Make it so you can search the beers by their name, and the page content should update as you type each letter in the box.

Extension 2 - Filtering (Red borders/lines)

Finally the extra extra (only if you have the time), make it so you can filter the content on three conditions:

  • High Alcohol (ABV value greater than 6%)
  • Classic Range (Was first brewed before 2010)
  • High Acidity (pH lower than 4)

Best of luck!