├── css └── countries.css ├── js ├── kanye.js ├── buddy.js ├── countries.js ├── mealdb.js └── mealdbasync.js ├── buddy.html ├── kanye.html ├── countries.html └── mealdb.html /css/countries.css: -------------------------------------------------------------------------------- 1 | #countries{ 2 | display: grid; 3 | grid-template-columns: repeat(3, 1fr); 4 | } 5 | .country{ 6 | border: 2px solid tomato; 7 | margin: 10px; 8 | padding: 20px; 9 | border-radius: 10px; 10 | } -------------------------------------------------------------------------------- /js/kanye.js: -------------------------------------------------------------------------------- 1 | const loadQuotes = () => { 2 | fetch('https://api.kanye.rest/') 3 | .then(res => res.json()) 4 | .then(data => displayQuote(data)); 5 | } 6 | 7 | const displayQuote = quote => { 8 | const quoteElement = document.getElementById('quote'); 9 | quoteElement.innerText = quote.quote; 10 | } -------------------------------------------------------------------------------- /buddy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Buddy 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /kanye.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Kanye West 9 | 10 | 11 | 12 |

Kanye Quotes

13 | 14 |
15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /js/buddy.js: -------------------------------------------------------------------------------- 1 | const loadBuddies = () => { 2 | fetch('https://randomuser.me/api/?results=5') 3 | .then(res => res.json()) 4 | .then(data => displayBuddies(data)); 5 | } 6 | loadBuddies(); 7 | 8 | const displayBuddies = data => { 9 | console.log(data); 10 | const buddies = data.results; 11 | const buddiesDiv = document.getElementById('buddies'); 12 | for (const buddy of buddies) { 13 | const p = document.createElement('p'); 14 | p.innerText = `Name: ${buddy.name.title} ${buddy.name.first} ${buddy.name.last} email: ${buddy.email}`; 15 | buddiesDiv.appendChild(p); 16 | } 17 | } -------------------------------------------------------------------------------- /countries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Countries 9 | 10 | 11 | 12 | 13 |
14 |

Country Details

15 |
16 | 17 |
18 |
19 |

Countries

20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /js/countries.js: -------------------------------------------------------------------------------- 1 | const loadCountries = () => { 2 | fetch('https://restcountries.eu/rest/v2/all') 3 | .then(res => res.json()) 4 | .then(data => displayCountries(data)); 5 | } 6 | loadCountries(); 7 | 8 | const displayCountries = counties => { 9 | // for (const country of counties) { 10 | // console.log(country); 11 | // } 12 | const countriesDiv = document.getElementById('countries'); 13 | counties.forEach(country => { 14 | // console.log(country); 15 | const div = document.createElement('div'); 16 | div.classList.add('country') 17 | div.innerHTML = ` 18 |

${country.name}

19 |

${country.capital}

20 | 21 | `; 22 | countriesDiv.appendChild(div); 23 | }); 24 | } 25 | 26 | const loadCountryByName = name => { 27 | const url = `https://restcountries.eu/rest/v2/name/${name}`; 28 | fetch(url) 29 | .then(res => res.json()) 30 | .then(data => displayCountryDetail(data[0])); 31 | } 32 | 33 | const displayCountryDetail = country => { 34 | console.log(country); 35 | const countryDiv = document.getElementById('country-detail'); 36 | countryDiv.innerHTML = ` 37 |
${country.name}
38 |

population: ${country.population}

39 | 40 | ` 41 | } -------------------------------------------------------------------------------- /mealdb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Khabar Dibi Naki 9 | 11 | 12 | 13 | 14 |

Search your favorite food

15 | 16 |
17 | 19 | 21 |
22 |
23 |

Something went wrong please try again later

24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 34 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /js/mealdb.js: -------------------------------------------------------------------------------- 1 | document.getElementById('error-message').style.display = 'none'; 2 | const searchFood = () => { 3 | const searchField = document.getElementById('search-field'); 4 | const searchText = searchField.value; 5 | // clear data 6 | searchField.value = ''; 7 | document.getElementById('error-message').style.display = 'none'; 8 | if (searchText == '') { 9 | // please write something to display 10 | } 11 | else { 12 | // load data 13 | const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchText}`; 14 | fetch(url) 15 | .then(res => res.json()) 16 | .then(data => displaySearchResult(data.meals)) 17 | .catch(error => displayError(error)); 18 | } 19 | } 20 | 21 | const displayError = error => { 22 | document.getElementById('error-message').style.display = 'block'; 23 | } 24 | 25 | const displaySearchResult = meals => { 26 | const searchResult = document.getElementById('search-result'); 27 | searchResult.textContent = ''; 28 | if (meals.length == 0) { 29 | // show no result found; 30 | } 31 | meals.forEach(meal => { 32 | // console.log(meal); 33 | const div = document.createElement('div'); 34 | div.classList.add('col'); 35 | div.innerHTML = ` 36 |
37 | ... 38 |
39 |
${meal.strMeal}
40 |

${meal.strInstructions.slice(0, 200)}

41 |
42 |
43 | `; 44 | searchResult.appendChild(div); 45 | }) 46 | } 47 | 48 | const loadMealDetail = mealId => { 49 | const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealId}`; 50 | fetch(url) 51 | .then(res => res.json()) 52 | .then(data => displayMealDetail(data.meals[0])); 53 | } 54 | 55 | const displayMealDetail = meal => { 56 | console.log(meal); 57 | const mealDetails = document.getElementById('meal-details'); 58 | const div = document.createElement('div'); 59 | div.classList.add('card'); 60 | div.innerHTML = ` 61 | ... 62 |
63 |
${meal.strMeal}
64 |

${meal.strInstructions.slice(0, 150)}

65 | Go somewhere 66 |
67 | `; 68 | mealDetails.appendChild(div); 69 | } -------------------------------------------------------------------------------- /js/mealdbasync.js: -------------------------------------------------------------------------------- 1 | const searchFood = async () => { 2 | const searchField = document.getElementById('search-field'); 3 | const searchText = searchField.value; 4 | // clear data 5 | searchField.value = ''; 6 | if (searchText == '') { 7 | // please write something to display 8 | } 9 | else { 10 | // load data 11 | const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${searchText}`; 12 | 13 | try { 14 | const res = await fetch(url); 15 | const data = await res.json(); 16 | displaySearchResult(data.meals) 17 | } 18 | catch (error) { 19 | console.log(error); 20 | } 21 | 22 | // fetch(url) 23 | // .then(res => res.json()) 24 | // .then(data => displaySearchResult(data.meals)); 25 | } 26 | 27 | } 28 | 29 | const displaySearchResult = meals => { 30 | const searchResult = document.getElementById('search-result'); 31 | searchResult.textContent = ''; 32 | if (meals.length == 0) { 33 | // show no result found; 34 | } 35 | meals.forEach(meal => { 36 | // console.log(meal); 37 | const div = document.createElement('div'); 38 | div.classList.add('col'); 39 | div.innerHTML = ` 40 |
41 | ... 42 |
43 |
${meal.strMeal}
44 |

${meal.strInstructions.slice(0, 200)}

45 |
46 |
47 | `; 48 | searchResult.appendChild(div); 49 | }) 50 | } 51 | 52 | const loadMealDetail = async mealId => { 53 | const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealId}`; 54 | 55 | const res = await fetch(url); 56 | const data = await res.json(); 57 | displayMealDetail(data.meals[0]); 58 | // fetch(url) 59 | // .then(res => res.json()) 60 | // .then(data => displayMealDetail(data.meals[0])); 61 | } 62 | 63 | const displayMealDetail = meal => { 64 | console.log(meal); 65 | const mealDetails = document.getElementById('meal-details'); 66 | mealDetails.textContent = ''; 67 | const div = document.createElement('div'); 68 | div.classList.add('card'); 69 | div.innerHTML = ` 70 | ... 71 |
72 |
${meal.strMeal}
73 |

${meal.strInstructions.slice(0, 150)}

74 | Go somewhere 75 |
76 | `; 77 | mealDetails.appendChild(div); 78 | } --------------------------------------------------------------------------------