trayshmhirk/perfect-cocktail-app

A multipage website that calls a cocktailDB API for the cocktails. Each page search for cocktails based on names, ingredients, categories, and alcohol content. You can also save cocktails as favorites.

Perfect Cocktail API

This is a multipage website where you can search for cocktails based on names, ingredients, categories, and alcohol content. Add cocktails to favorites and access them in the favorites page. Bootstrap 5.0 was used in building this app.

Table of contents

• Perfect Cocktail API
  • Table of contents
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

My process

Built with

• Semantic HTML5 markup
• Bootstrap
• Vanilla Javascript

What I learned

I had to remove the measurements for some of the ingredients, because the measurements were not available and it was returning null

// create a string template to pass the ingredients and measure into and return the string into the function to be called at the deignated site
let ingredientTemplate = '';
ingredients.forEach(ingredient => {
    // returns a different list item if the measure of a particular ingredient is null from the API
    if (ingredient.measure === null) {
        // remove the null from the DOM
        return ingredientTemplate += `
            <li class="list-group-item">${ingredient.ingredient}</li>
        `
    } else {
        // add the measure of the ingredient
        return ingredientTemplate += `
            <li class="list-group-item">${ingredient.ingredient} - ${ingredient.measure}</li>
        `
    } 
});

Continued development

I would like to see how i can develop a full scale website like this using reactJS

Author

• GitHub - @Trayshmhirk
• Twitter - @TrayShmhirk01