PinkPau/dishes.html at main · aMOOSEing/PinkPau · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meal Finder</title>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    <script src="components/header.js" type="text/javascript" defer></script>
    <script src="components/searchBar.js" type="text/javascript" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header-component></header-component>
    <search-bar></search-bar>
    <div class="ingredientfilter">
        <span><b>Filter by ingredient:&nbsp;&nbsp;&nbsp;</b></span>
        <label for="rice">Rice</label>
        <input type="checkbox" id="rice" value="Rice" name="rice">
    </div>
    <p id="message"></p>

    <!-- Display search results here -->
    <div id="results"></div>
    <div class="container">
        <div class="meals-container" id="meals"></div> <!-- Ensure meals div is here -->
    </div>

        <!--This script links search query result to this page-->
        <script>
            function getQueryParameter(name) {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(name);
            }

            function displayResults() {
                const query = getQueryParameter('query');
                const resultsDiv = document.getElementById('results');
                console.log('Query:', query); // Log the query for debugging

                if (query) {
                    resultsDiv.innerHTML = `<p>You searched for: <strong>${query}</strong></p>`;
                    // Ensure that the input field with id "searchQuery" exists
                    const searchQueryInput = document.getElementById('searchQuery');
                    if (searchQueryInput) {
                        searchQueryInput.value = query; // Populate the search bar with the query
                    } else {
                        console.error('Element with id "searchQuery" not found.');
                    }
                } else {
                    resultsDiv.innerHTML = '<p>No search query provided.</p>';
                }
            }

            async function searchMeals(isChecked) {
                if(isChecked){
                    const query = document.getElementById('rice').value || ' '; // Default to ' '
                    const url = `https://www.themealdb.com/api/json/v1/1/filter.php?i=${query}`;

                    try {
                        const response = await fetch(url);
                        const data = await response.json();
                        displayMeals(data.meals, isChecked);
                    } catch (error) {
                        console.error('Error fetching the meal data:', error);
                    }
                } else {
                    const query = document.getElementById('searchQuery').value || ' '; // Default to ' '
                    const url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`;

                    try {
                        const response = await fetch(url);
                        const data = await response.json();
                        displayMeals(data.meals,isChecked);
                    } catch (error) {
                        console.error('Error fetching the meal data:', error);
                    }
                }
            }

            function displayMeals(meals,isChecked) {
                const mealsDiv = document.getElementById('meals');
                mealsDiv.innerHTML = ''; // Clear previous results
                if(isChecked){
                    if(meals){
                        console.log(meals);
                        meals.forEach(meal => {
                            const mealDiv = document.createElement('div');
                            mealDiv.className = 'meal';
                            mealDiv.innerHTML = `
                            <img class="meal-img" src="${meal.strMealThumb}" alt="${meal.strMeal}">
                            <div class="meal-content">
                                <h2>${meal.strMeal}</h2>
                                <form action="specificdish.html" method="get">
                                    <input type="text" name="meal_id" value="${meal.idMeal}" hidden>
                                    <button class="select-btn" type="submit">Start cooking!</button>
                                </form>
                            </div>
                        `;
                        mealsDiv.appendChild(mealDiv);
                        });
                    }
                } else {
                    if (meals) {
                        meals.forEach(meal => {
                            const mealDiv = document.createElement('div');
                            mealDiv.className = 'meal';
                            mealDiv.innerHTML = `
                                <img class="meal-img" src="${meal.strMealThumb}" alt="${meal.strMeal}">
                                <div class="meal-content">
                                    <h2>${meal.strMeal}</h2>
                                    <p>${meal.strInstructions.slice(0, 90)}...</p>
                                    <form action="specificdish.html" method="get">
                                        <input type="text" name="meal_id" value="${meal.idMeal}" hidden>
                                        <button class="select-btn" type="submit">Start cooking!</button>
                                    </form>
                                </div>
                            `;
                            mealsDiv.appendChild(mealDiv);
                        });
                    } else {
                        mealsDiv.innerHTML = '<p>No meals found.</p>';
                    }
                }
            }
            const checkbox = document.getElementById('rice');
            const message = document.getElementById('message');

            // Run this when the DOM is fully loaded
            document.addEventListener('DOMContentLoaded', () => {
                const query = getQueryParameter('query');
                if (query) {
                    displayResults(); // Display search results if there is a query
                }
                isChecked = false;
                searchMeals(isChecked); // Fetch default meal on page load

                /*
                //This code will allow you to call search api as you type on search bar - but uses alot of API calls so just be wary not to overload it!
                const searchQueryInput = document.getElementById('searchQuery');
                searchQueryInput.addEventListener('input',function(){
                    console.log(searchQueryInput.value);
                    searchMeals(false);
                });
                /*/
            });

            // Add an event listener for change events
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    // Action to perform if checkbox is checked
                    isChecked = true;
                    searchMeals(isChecked);
                } else {
                    // Action to perform if checkbox is unchecked
                    isChecked = false;
                    searchMeals(isChecked);
                }
            });
        </script>
</body>
</html>