hipstina / ipa-api

🍺 Web app built with JS that filters API data

The IPA API

I built a simple web app for filtering API data.

View live demo of the IPA API.

Project status

• Completed
• In Progress
• Archived

Product Description

This is a web app for filtering beers by style, ABV, and IBU. It was built with vanilla JS, HTML, and CSS.

I pulled data from https://punkapi.com/. PunkAPI is a free and open source project.

Technologies used

• HTML 5
• CSS (& SCSS)
• JavaScript/ES6

Getting Started

$ git clone https://github.com/hipstina/ipa-api

Contributing

coming soon

To Do's ?

At this point, I am basically done with this project. However, I can't help myself from tweaking things, so there are 2 main items I may add on later:

• I want to add a button to each card that triggers an overlay of the beer description. I would need to query the correct DOM elements to trigger a sibling element , or something like that.
• I also want to make the sidebarMenu toggle into and out of view, so that the app works well on mobile too.

Takeaways

In total I spent about 4-5 days on this application.

Some of the JS/browser technology concepts I got to apply in this project include:

• connecting to an API by sending XMLHttpRequests
• cross-origin resource sharing (CORS)
• displaying API data
• building HTML elements
• removing HTML elements recursively
• filtering objects properties
• building tools to filter and sort API data from the client-side
• linking form inputs to event handlers
• event delegation, bubbling, hoisting, call stacks, template literals, navigating the DOM...

This was a really fun and practical little project! I learned a lot and feel ready to try something a little more challenging. Cracking open a cold one now 🍺