Boozle is an app that allows to search drinks and cocktails (alcoholic and non-alcoholic) by name or ingredient.
Link to project: https://boozle.netlify.app/
Tech used: HTML, CSS, JavaScript
I used the API from TheCocktailDB to fetch data about drinks and match it with queries entered by the user. Inspired by a Google search, I added a "Surprise me" button similar to "I'm feeling lucky" to throw random drinks when the user requires no specific ingredient.
The pagination buttons ("left" and "right" emojis) are not always behaving as expected. The same goes for notifications. Sometimes they won't disappear when I would expect them to. These things need to be fixed should I decide to refactor the baddie code later.
While digging into DOM specifics learned that code like this:
document.querySelector('h3').innerText
IS NOT JavaScript. JavaScript doesn't even have it at its core. The DOM (Document Object Model) is essentially the API one uses to manipulate an HTML (or XML) document - usually using JavaScript. So the line of code above is a DOM API, not JS.