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

1'use strict';
2
3// Doing a test with git
4
5const urls = {
6  random: 'https://www.thecocktaildb.com/api/json/v2/961249867/random.php',
7  name: 'https://www.thecocktaildb.com/api/json/v2/961249867/search.php?s=',
8  popular: `https://www.thecocktaildb.com/api/json/v2/961249867/popular.php`,
9  latest: 'https://www.thecocktaildb.com/api/json/v2/961249867/latest.php',
10  id: 'https://www.thecocktaildb.com/api/json/v2/961249867/lookup.php?i=',
11};
12
13function displaySingleDrink() {
14  const promise = fetchProducts(urls.id + document.URL.split('?')[1]);
15  promise.then(data => {
16    const ingredientList = document.querySelector('.ingredient-list');
17
18    document.querySelector('.random-header').textContent =
19      data.drinks[0].strDrink;
20    document
21      .querySelector('.single-image')
22      .setAttribute('src', data.drinks[0].strDrinkThumb);
23    for (let i = 1; i < 15; i++) {
24      if (data.drinks[0]['strIngredient' + i]) {
25        ingredientList.innerHTML += `<li> ${
26          data.drinks[0]['strMeasure' + i]
27            ? data.drinks[0]['strMeasure' + i]
28            : ''
29        } ${data.drinks[0]['strIngredient' + i]}</li>`;
30      }
31    }
32

33    for (let el of data.drinks[0].strInstructions.split('.')) {
34      if (el) {
35        document.querySelector('.instructions').innerHTML += `<li>${el}.</li>`;
36      }
37    }
38  });
39}
40function displayRandomDrink() {
41  const randomDrink = fetchProducts(urls.random);
42
43  randomDrink.then(data => {
44    const ingredientList = document.querySelector('.ingredient-list');
45
46    document.querySelector('.random-header').textContent =
47      data.drinks[0].strDrink;
48    document
49      .querySelector('.random-image')
50      .setAttribute('src', data.drinks[0].strDrinkThumb);
51    for (let i = 1; i < 15; i++) {
52      if (data.drinks[0]['strIngredient' + i]) {
53        ingredientList.innerHTML += `<li> ${
54          data.drinks[0]['strMeasure' + i]
55            ? data.drinks[0]['strMeasure' + i]
56            : ''
57        } ${data.drinks[0]['strIngredient' + i]}</li>`;
58      }
59    }
60
61    for (let el of data.drinks[0].strInstructions.split('.')) {
62      if (el) {
63        document.querySelector('.instructions').innerHTML += `<li>${el}.</li>`;
64      }
65    }
66  });
67}
68function displayPopularDrinks() {
69  const popularDrinksInsert = document.getElementById('popular-drink-items');
70  const popularDrinks = fetchProducts(urls.popular);
71
72  popularDrinks
73    .then(data => {
74      data.drinks.forEach(element => {
75        popularDrinksInsert.innerHTML += `
76        <div class="col s12 m6 l4">
77          <div class="card hoverable">
78              <div class="card-image">
79                <img src="${element.strDrinkThumb}" />
80                <span class="card-title">${element.strDrink}</span>
81                  </div>
82                  <div class="card-content">
83                    <p>
84                      Glass: ${element.strGlass}
85                    </p>
86                    <p>
87                      Alcohol: ${element.strIngredient1}
88                    </p>
89                    <p>
90                      Type: ${element.strAlcoholic}
91                    </p>
92                  </div>
93                  <div class="card-action" data-target="${element.idDrink}">
94                    <a href="drink.html?${element.idDrink}" class="single-link">Full Recipe</a>
95                  </div>
96            </div>
97          </div>
98  `;
99      });
100    })
101    .catch(error => {
102      console.error(`Could not get products: ${error}`);
103    });
104}
105
106function displaySearchDrinks() {
107  const searchDrinksInsert = document.getElementById('search-drink-items');
108  let urlParams = new URLSearchParams(window.location.search).get('cocktail');
109  urlParams = urlParams.split(' ').join('+');
110
111  const searchDrinks = fetchProducts(urls.name + urlParams);
112
113  searchDrinks
114    .then(data => {
115      if (data.drinks) {
116        data.drinks.forEach(element => {
117          searchDrinksInsert.innerHTML += `
118        <div class="col s12 m6 l4">
119          <div class="card hoverable">
120              <div class="card-image">
121                <img src="${element.strDrinkThumb}" />
122                <span class="card-title">${element.strDrink}</span>
123                  </div>
124                  <div class="card-content">
125                    <p>
126                      Glass: ${element.strGlass}
127                    </p>
128                    <p>
129                      Alcohol: ${element.strIngredient1}
130                    </p>
131                    <p>
132                      Type: ${element.strAlcoholic}
133                    </p>
134                  </div>
135                  <div class="card-action" data-target="${element.idDrink}">
136                    <a href="drink.html?${element.idDrink}" class="single-link">Full Recipe</a>
137                  </div>
138            </div>
139          </div>
140  `;
141        });
142      } else {
143        searchDrinksInsert.innerHTML += `
144        <h3>No results found.</h3>
145        `;
146      }
147    })
148    .catch(error => {
149      console.error(`Could not get products: ${error}`);
150    });
151}
152
153function displayLatestDrinks() {
154  const latestDrinksInsert = document.getElementById('latest-drink-items');
155  const latestDrinks = fetchProducts(urls.latest);
156
157  latestDrinks
158    .then(data => {
159      // const partialArr = data.drinks.splice(0, 9);
160      data.drinks.forEach(element => {
161        latestDrinksInsert.innerHTML += `
162      <div class="col s12 m6 l4">
163        <div class="card hoverable">
164            <div class="card-image">
165              <img src="${element.strDrinkThumb}" />

166              <span class="card-title">${element.strDrink}</span>
167                </div>
168                <div class="card-content">
169                  <p>
170                    Glass: ${element.strGlass}
171                  </p>
172                  <p>
173                    Alcohol: ${element.strIngredient1}
174                  </p>
175                  <p>
176                    Type: ${element.strAlcoholic}
177                  </p>
178                </div>
179                <div class="card-action" data-target="${element.idDrink}">
180                  <a href="drink.html?${element.idDrink}" class="single-link">Full Recipe</a>
181                </div>
182          </div>
183        </div>
184`;
185      });
186    })
187    .catch(error => {
188      console.error(`Could not get products: ${error}`);
189    });
190}
191
192async function fetchProducts(url) {
193  const response = await fetch(url);
194  if (!response.ok) {
195    throw new Error(`HTTP error: ${response.status}`);
196  }
197  const data = await response.json();
198  return data;
199}
200
201document.addEventListener('DOMContentLoaded', function () {
202  var elems = document.querySelectorAll('.sidenav');
203  var instances = M.Sidenav.init(elems, { edge: 'right' });
204
205  if (document.URL.includes('random')) {
206    displayRandomDrink();
207  } else if (document.URL.includes('drink')) {
208    displaySingleDrink();
209  } else if (
210    !document.URL.includes('random') &&
211    !document.URL.includes('drink') &&
212    !document.URL.includes('about') &&
213    !document.URL.includes('popular') &&
214    !document.URL.includes('search')
215  ) {
216    displayLatestDrinks();
217  } else if (document.URL.includes('search')) {
218    displaySearchDrinks();
219  } else if (document.URL.includes('popular')) {
220    displayPopularDrinks();
221  }
222});