BarmanApp Project Submission

[goran2308]

Project Name / Title

Barman App

Your Name / Title

Goran

Project Description

This app allows you to find your favourite cocktail recipe. Good if you want to impress your friends at the parties. Enjoy!

• https://github.com/goran2308/BarmanApp

What 3rd Party Web API do you plan to use?

• https://www.thecocktaildb.com/api.php

Which of the following describes you:

• YouTube Subscriber
• Twitch Follower
• Patreon Patron
• Superchat Donor
• Streamlabs Donor
• Coding Garden Moderator

[w3cj]

Nice idea! Please fill out the full project description template and add it to your repo: https://raw.githubusercontent.com/CodingGarden/seedling-school-01-frontend-project/master/PROJECT_DESCRIPTION_TEMPLATE.md

[goran2308]

Changes are done and the project is live: http://barmanapp.surge.sh/

[mahendrjy]

I like it, It's amazing.

[goran2308]

@iampika thanks mate. Your project looks great as well. Keep up the good work.

[goran2308]

@w3cj CJ I just need one little thing from you please. Can you explain me how to iterate through the ingredients as they are hard coded for now. First time I am working with API. Thanks.

[mahendrjy]

Thank you so much for your kind words.

// I assume you already know how to get data from api

// Let's say, from api you get ingredients array which is look something like this
const ingredients = [
  {
    id: 1,
    name: 'apple'
  },
  {
    id: 2,
    name: 'banana'
  },
  {
    id: 1,
    name: 'grapes'
  },
]

// This is where you want to place the iterated data
const myIngredients = document.querySelector('#ingredients');

// How to iterate and place the data into html
ingredients.forEach(ingredient => {
  myIngredients.innerHTML += `<li class="ingredient">${ingredient.name}</li>`
})

[goran2308]

@iampika I get the data like this:

"drinks":
[{"idDrink":"11007",
"strDrink":"Margarita",
"strDrinkAlternate":null,
"strDrinkES":null,
"strDrinkDE":null,
"strDrinkFR":null,
"strDrinkZH-HANS":null,
"strDrinkZH-HANT":null,
"strTags":"IBA,ContemporaryClassic",
"strVideo":null,
"strCategory":"Ordinary Drink",
"strIBA":"Contemporary Classics",
"strAlcoholic":"Alcoholic",
"strGlass":"Cocktail glass",
"strIngredient1":"Tequila",
"strIngredient2":"Triple sec",
"strIngredient3":"Lime juice",
"strIngredient4":"Salt",
"strIngredient5":null,
"strIngredient6":null
]}

So basically I want to take the ingredients only from the object, make an array and remove null values. Later just iterate through the array and console log the values.

[mahendrjy]

@goran2308 I think you want all the ingredients from all the drinks

const data = {
  drinks: [
    {
      idDrink: '11007',
      strDrink: 'Margarita',
      strDrinkAlternate: null,
      strDrinkES: null,
      strDrinkDE: null,
      strDrinkFR: null,
      'strDrinkZH-HANS': null,
      'strDrinkZH-HANT': null,
      strTags: 'IBA,ContemporaryClassic',
      strVideo: null,
      strCategory: 'Ordinary Drink',
      strIBA: 'Contemporary Classics',
      strAlcoholic: 'Alcoholic',
      strGlass: 'Cocktail glass',
      strIngredient1: 'Tequila',
      strIngredient2: 'Triple sec',
      strIngredient3: 'Lime juice',
      strIngredient4: 'Salt',
      strIngredient5: null,
      strIngredient6: null,
    },
  ],
};

// Getting drinks from data
const { drinks } = data;

// Make an array
const ingredients = [];

// Iterate through the array
drinks.forEach(drink => {
  let num = 1;
  let strIngredient = `strIngredient${num}`;

  while (num <= 6) {
    // remove null values and check if the value is already exist
    if (
      !(drink[strIngredient] === null) &&
      !ingredients.includes(drink[strIngredient])
    ) {
      // add ingredient to the ingredients array
      ingredients.push(drink[strIngredient]);
    }
    num++;
    strIngredient = `strIngredient${num}`;
  }
});

// console log the values
console.log(ingredients); // [ 'Tequila', 'Triple sec', 'Lime juice', 'Salt' 

[goran2308]

@iampika Cheers mate. After your post I learned about destructuring the objects. It is just amazing what can you do wit all that. I'll try to implement that in the project. Lack of time is my enemy :).

[mahendrjy]

@goran2308 Your Welcome.

[w3cj]

Any updates to share? Let me know if you would like an ui review or code review.

[goran2308]

@w3cj I would like you to review my code and design. Just one other thing if you have time please to explain me how to fix ingredients section. Right now they are hard coded, but I want to make them dynamic. I tried to use the solution from @iampika and I still can't make it work with this API. Thanks a lot.