-
Notifications
You must be signed in to change notification settings - Fork 1
/
cocktail.js
208 lines (192 loc) · 6.69 KB
/
cocktail.js
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
//global variables
var alcoholImg = document.getElementsByClassName("modal-close");
var alcoholId;
var drinkId;
var drinkArray;
var drinkImage = document.getElementById("drink-image");
var cardIndex;
var cardText;
//This loops through the images in the modal
for (i = 0; i < alcoholImg.length; i++) {
//when the user clicks an image in the modal, search for drinks made with that alcohol
$(alcoholImg[i]).on("click", function () {
alcoholId = this.id;
var settings = {
"async": true,
"crossDomain": true,
"url": "https://the-cocktail-db.p.rapidapi.com/filter.php?i=" + alcoholId,
"method": "GET",
"headers": {
"x-rapidapi-host": "the-cocktail-db.p.rapidapi.com",
"x-rapidapi-key": "c941fba9d6msh89d2c84a1b6155ap13fc7cjsn95e6f99347b9"
}
}
console.log(alcoholId);
$.ajax(settings).done(function (intialResponse) {
console.log(intialResponse);
listDrinks(intialResponse);
drinkImg(intialResponse)
callRecipe(intialResponse);
});
})
}
//this lists out drinks made from selected alcohol
function listDrinks(response) {
var drinkList = document.getElementById("drink-choices");
console.log(drinkList)
$(drinkList).empty();
drinkArray = response.drinks;
console.log(drinkArray);
for (i = 0; i < drinkArray.length; i++) {
var drinkCard = document.createElement("div");
drinkCard.setAttribute("class", "card-panel hoverable drink");
drinkCard.setAttribute("data-index", drinkArray[i].idDrink)
console.log(drinkCard.getAttribute('data-index'))
var drinkText = document.createTextNode(drinkArray[i].strDrink);
drinkCard.appendChild(drinkText);
drinkCard.setAttribute("button-style", "inactive")
drinkList.appendChild(drinkCard);
drinkList.setAttribute("style", "overflow: scroll");
}
var drinkCards = document.querySelectorAll(".drink")
drinkCards[0].setAttribute("style", "background-color: #FFBF00")
}
//this is listening for a click on one of the drink list cards
$('div').on("click", ".drink", function (event) {
if (window.location.href.indexOf("byo-drink.html") > 0) {
event.stopPropagation();
console.log(this.getAttribute("data-index"))
cardIndex = this.getAttribute("data-index");
var cardText = this.innerText;
console.log(cardText)
renderBYODefinition(cardText);
var cardEl = this;
console.log($(this).siblings())
var cardElAttr = this.getAttribute("button-style");
if (cardElAttr === "inactive") {
cardEl.setAttribute("button-style", "active")
cardEl.setAttribute("style", "background-color: #FFBF00")
var cardArray = $(cardEl).siblings();
for (i = 0; i < cardArray.length; i++) {
console.log(cardArray[i])
cardArray[i].setAttribute("button-style", "inactive")
cardArray[i].setAttribute("style", "background-color: white")
}
}
//pass the value of the data index to the call recipe function
callRecipe(cardIndex);
}
})
//this renders the image of the current drink
function drinkImg(response) {
if (typeof response === 'object') {
console.log(response);
imageSource = response.drinks[0].strDrinkThumb;
console.log(drinkImage.children[0].src);
drinkImage.children[0].src = imageSource
}
//this is the user selected value
else if (typeof response === "string") {
console.log(typeof response);
console.log(response)
imageSource = response;
drinkImage.children[0].src = imageSource;
}
}
//this is the heart of BYO drink page. It gets info on a drink by the drink id. It either gets a default or selected value
function callRecipe(response) {
console.log(response)
//this is the default value
if (typeof response === 'object') {
console.log(typeof response)
drinkId = response.drinks[0].idDrink
var nameofDrink = response.drinks[0].strDrink
renderBYODefinition(nameofDrink);
}
//this is the user selected value
else if (typeof response === "string") {
console.log(typeof response);
drinkId = response;
}
//this is the api call to get all the info on a drink
var recipe = {
"async": true,
"crossDomain": true,
"url": "https://the-cocktail-db.p.rapidapi.com/lookup.php?i=" + drinkId,
"method": "GET",
"headers": {
"x-rapidapi-host": "the-cocktail-db.p.rapidapi.com",
"x-rapidapi-key": "c941fba9d6msh89d2c84a1b6155ap13fc7cjsn95e6f99347b9"
}
}
$.ajax(recipe).done(function (recipeResponse) {
console.log(recipeResponse);
drinkRecipe(recipeResponse);
drinkImg(recipeResponse);
});
}
//this takes info from the call recipe api call and renders it to the screen
function drinkRecipe(drinkResponse) {
drinkArray = drinkResponse.drinks
var recipeEl = document.getElementById("instructions");
$(recipeEl).empty();
var ingredientsEl = document.createElement('div');
//this loop is looking for keys in the drink object and selecting the ones that contain strIngredient
var ingredientsArray = [];
drinkArray.forEach(drink => {
var keys = Object.keys(drink);
keys = keys.filter(function (key) {
return key.indexOf("strIngredient") !== -1;
})
keys.forEach(function (key) {
var ingredient = drink[key]
if (ingredient) {
ingredientsArray.push(ingredient);
console.log(ingredient);
}
})
});
//this loop is looking for keys in the drink object and selecting the ones that contain strMeasure
var measureArray = [];
drinkArray.forEach(drink => {
var keys = Object.keys(drink);
keys = keys.filter(function (key) {
return key.indexOf("strMeasure") !== -1;
})
keys.forEach(function (key) {
var measure = drink[key]
if (measure) {
measureArray.push(measure);
console.log(measure);
}
})
});
//render out the different ingredients with their measures
var drinkTitle = document.createElement('h3')
drinkTitle.innerText = drinkResponse.drinks[0].strDrink;
var ingredientsTitle = document.createElement('h3')
ingredientsTitle.innerHTML = "Ingredients:"
ingredientsTitle.setAttribute("style", "margin-top: 0px")
ingredientsEl.append(ingredientsTitle);
console.log(ingredientsArray);
for (i = 0; i < ingredientsArray.length; i++) {
var ingredientsText = document.createElement("p");
ingredientsText.innerText = measureArray[i] + ingredientsArray[i];
console.log(ingredientsText)
ingredientsEl.appendChild(ingredientsText);
}
recipeEl.appendChild(ingredientsEl);
var glass = drinkResponse.drinks[0].strGlass;
var glassEl = document.createElement("p");
glassEl.innerText = "Serving Glass: " + glass;
recipeEl.appendChild(glassEl);
var instructions = drinkResponse.drinks[0].strInstructions;
var instructionEl = document.createElement("div");
var instructionTitle = document.createElement("h3");
instructionTitle.innerText = "Instructions:"
var instructionText = document.createElement("p");
instructionText.innerText = instructions;
instructionEl.appendChild(instructionTitle);
instructionEl.appendChild(instructionText);
recipeEl.appendChild(instructionEl);
}