Dinner_Party/cocktail.js at master · kokevin678/Dinner_Party · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
var spirit;
var drinkID;

//based on a given protein figure out a spirit that pairs
function getSpirit(protein) {
    console.log(protein);
    var spirit;
    if (protein === "beef")
        spirit = "bourbon";
    if (protein === "salmon")
        spirit = "vodka";
    if (protein === "tofu")
        spirit = "gin";
    if (protein === "lentils")
        spirit = "rum";
    if (protein === "shellfish")
        spirit = "rum";

    return spirit;
}

//get drinkId based on spirit and API. Unpon completion call callback function
function getDrinkID(callback) {
    //building query to get a drink
    var queryURL = "https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=" + spirit;
    $.ajax({
        url: queryURL,
        method: "GET"
    }).then(function (response) {
        console.log("Drink query: " + queryURL);
        console.log(response);
        var randomDrink = Math.floor(Math.random() * response.drinks.length);
        drinkID = response.drinks[randomDrink].idDrink;
        console.log("drinkID: " + drinkID);
        callback();
    });
}

//Given a drink ID get the cocktail information. Call to render cocktail pnce information is completely retireved
function getCocktail() {

    //query building to lookup cocktail info
    var queryURL = "https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=" + drinkID;
    $.ajax({
        url: queryURL,
        method: "GET"
    }).then(function (response) {
        console.log("Get cocktail based ID query: " + queryURL);
        console.log(response);

        var drinkInfo = response.drinks[0];
        renderCocktail(drinkInfo);
    });
}

//render cocktail to html
function renderCocktail(drinkInfo) {

    //Creating column to append to #choices row
    var column = $("<div>");
    column.addClass("col s6 m6");

    //create card
    var card = $("<div>");
    card.addClass("card z-depth-4");
    //set up image with title
    var cardImg = $("<div>");
    cardImg.addClass("card-image");
    var img = $("<img>");
    img.attr("src", drinkInfo.strDrinkThumb);
    //set up title
    var titleSpan = $("<span>");
    titleSpan.addClass("card-title");
    var title = $("<h3>");
    title.text(drinkInfo.strDrink);
    titleSpan.append(title);
    cardImg.append(img);
    cardImg.append(titleSpan);
    //done setting up image  wit title

    //setting up content
    var content = $("<div>");
    content.addClass("card-content");

    //Recipe and ingredients ---------
    var ingredientList = $("<ol>");
    ingredientList.text("Ingredients");

    for (var i = 1; i <= 15; i++) {

        var measure = eval("drinkInfo.strMeasure" + i);
        var name = eval("drinkInfo.strIngredient" + i);
        console.log(measure + " " + name);

        if (!measure)
            measure = "";
        if (name) {
            var ingredient = $("<li>");
            ingredient.text(measure + " " + name);
            ingredientList.append(ingredient);
        }
    }

    var ingredient = $("<li>");
    ingredient.text(drinkInfo.strGlass);
    ingredientList.append(ingredient);
    var recipe = $("<p>");
    recipe.text("Recipe: " + drinkInfo.strInstructions);

    content.append(ingredientList);
    content.append(recipe);
    //done setting up content / append to card

    card.append(cardImg);
    card.append(content);
    column.append(card);
    $("#choices").append(column);
}