├── assets
├── app.js
└── style.css
└── index.html
/assets/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const data_container = document.getElementById('foods');
3 | const searchBtn = document.getElementById('searchBtn');
4 | const warning = document.getElementById('warning');
5 |
6 | // Search Btn Click Function
7 | searchBtn.addEventListener('click', function () {
8 | const keyword = document.getElementById('keyword').value;
9 | data_container.innerHTML = '';
10 | if (keyword === '') {
11 | warning.style.display = 'block';
12 | } else {
13 | getFood(keyword);
14 | warning.style.display = 'none';
15 | }
16 | });
17 | // Details for Foods
18 | const displayDetails = name => {
19 | const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${name}`;
20 | fetch(url)
21 | .then(res => res.json())
22 | .then(data => {
23 | renderFoodInfo(data.meals[0]);
24 | console.log(data.meals[0]);
25 | });
26 | };
27 | // Render Single Food Info
28 | const renderFoodInfo = (food) => {
29 | // Get all ingredients from the object. Up to 20
30 | const ingredients = [];
31 | for (let i = 1; i <= 20; i++) {
32 | if (food[`strIngredient${i}`]) {
33 | ingredients.push(`${food[`strIngredient${i}`]} - ${food[`strMeasure${i}`]}`);
34 | } else {
35 | // Stop if there are no more ingredients
36 | break;
37 | }
38 | }
39 | const foodDetailsDiv = document.getElementById('foodsDetails');
40 | foodDetailsDiv.innerHTML = `
41 | 
42 | ${food.strMeal}
43 |
44 | Ingredients
45 |
46 | ${ingredients.map((ingredient) => `- ${ingredient}
`).join('')}
47 |
48 | `;
49 | };
50 | // Foods Loop
51 | function getFood(mealId) {
52 | //const mainApi = `https://www.themealdb.com/api/json/v1/1/search.php?s=${keyword.value}`;
53 | const mainApi = `https://www.themealdb.com/api/json/v1/1/search.php?s=${mealId}`;
54 |
55 | fetch(mainApi)
56 | .then(res => res.json())
57 | .then(data => {
58 | displayFoods(data.meals);
59 | });
60 |
61 | const displayFoods = foods => {
62 | const foodsDiv = document.getElementById('foods');
63 | if (foods != null) {
64 | foods.map(food => {
65 | const foodDiv = document.createElement('div');
66 | foodDiv.className = 'col-md-3';
67 | const foodInfo = `
68 |
69 |
70 |
${food.strMeal}
71 |
Please enter valid food 🍔 name.
71 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
81 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------