https://drinksonme.netlify.app/js/main.js

1//The user will enter a cocktail. Get a cocktail name, photo, and instructions and place them in the DOM
2
3document.querySelector("button").addEventListener("click", getDrink);
4
5function getDrink() {
6    let i = 0;
7    let drink = document.querySelector("input").value;
8    let ingredientList = document.querySelector('.ingredientList')
9    fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${drink}`)
10        .then((res) => res.json())
11        .then((data) => {
12            if (
13                document.querySelector(".carousel").classList.contains("hidden")
14            ) {
15                document.querySelector(".carousel").classList.toggle("hidden");
16            }
17            console.log(data);
18
19            document.querySelector("h2").innerText = data.drinks[0].strDrink;
20            document.querySelector("img").src = data.drinks[0].strDrinkThumb;
21            for (let l = 1; l < 15; l++) {
22                let ingre = eval("data.drinks[i].strIngredient" + l);
23                console.log(ingre);
24                if (ingre !== null) {
25
26                    ingredientList.innerHTML += `<li>${ingre}</li>`;
27                }
28            }
29
30            document.querySelector(".instruct").innerText =

31                data.drinks[i].strInstructions;
32            document
33                .querySelector(".next")
34                .addEventListener("click", nextDrink);
35            document
36                .querySelector(".previous")
37                .addEventListener("click", previousDrink);
38
39            function nextDrink() {
40                if (i == data.drinks.length - 1) {
41                    i = 0;
42                    document.querySelector("h2").innerText =
43                        data.drinks[i].strDrink;
44                    document.querySelector("img").src =
45                        data.drinks[i].strDrinkThumb;
46                    document.querySelector(".instruct").innerText =
47                        data.drinks[i].strInstructions;
48                        ingredientList.innerHTML = "";
49                        for (let l = 1; l < 15; l++) {
50                        let ingre = eval("data.drinks[i].strIngredient" + l);
51                        console.log(ingre);
52                        
53                        if (ingre !== null && ingre !== '') {
54                           
55                            ingredientList.innerHTML += `<li>${ingre}</li>`;
56                        }
57                    }
58                    i++;
59                } else {
60                    i++;
61                    document.querySelector("h2").innerText =
62                        data.drinks[i].strDrink;
63                    document.querySelector("img").src =
64                        data.drinks[i].strDrinkThumb;
65                    document.querySelector(".instruct").innerText =

66                        data.drinks[i].strInstructions;
67                        ingredientList.innerHTML = ''
68                          
69                        for (let l = 1; l < 15; l++) {     
70                        let ingre = eval("data.drinks[i].strIngredient" + l);
71                        console.log(ingre);
72                       
73                        if (ingre !== null && ingre !== '') {
74                            ingredientList.innerHTML += `<li>${ingre}</li>`;
75                        }
76                    }
77                }
78            }
79
80            function previousDrink() {
81                if (i == 0) {
82                    i = data.drinks.length - 1;
83                    document.querySelector("h2").innerText =
84                        data.drinks[i].strDrink;
85                    document.querySelector("img").src =
86                        data.drinks[i].strDrinkThumb;
87                    document.querySelector(".instruct").innerText =
88                        data.drinks[i].strInstructions;
89                        ingredientList.innerHTML = ''
90                          
91                        for (let l = 1; l < 15; l++) {     
92                        let ingre = eval("data.drinks[i].strIngredient" + l);
93                        console.log(ingre);
94                       
95                        if (ingre !== null && ingre !== '') {
96                            ingredientList.innerHTML += `<li>${ingre}</li>`;
97                        }
98                    }
99                    i--;
100                } else {
101                    i--;
102                    document.querySelector("h2").innerText =
103                        data.drinks[i].strDrink;
104                    document.querySelector("img").src =
105                        data.drinks[i].strDrinkThumb;
106                    document.querySelector(".instruct").innerText =

107                        data.drinks[i].strInstructions;
108                        ingredientList.innerHTML = ''
109                          
110                        for (let l = 1; l < 15; l++) {     
111                        let ingre = eval("data.drinks[i].strIngredient" + l);
112                        console.log(ingre);
113                       
114                        if (ingre !== null && ingre !== '') {
115                            ingredientList.innerHTML += `<li>${ingre}</li>`;
116                        }
117                    }
118                }
119            }
120        });
121}