-
Notifications
You must be signed in to change notification settings - Fork 0
/
foodinfo_script.js
71 lines (65 loc) · 2.4 KB
/
foodinfo_script.js
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
document.getElementById("queryForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent default form submission
const query = document.getElementById("query").value.trim(); // Get the query value
// Make the API request
fetch('https://api.api-ninjas.com/v1/nutrition?query=' + query, {
method: 'GET',
headers: {
'X-Api-Key': 'pQ69iVgtzwM2ZpM++uuc5w==WYFFEzdhl5tECHv4'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
// Display the results
console.log(data);
displayResults(data);
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
});
/*
function displayResults(data) {
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = ""; // Clear previous results
if (data.error) {
resultsDiv.innerHTML = `<p>Error: ${data.error}</p>`;
} else if (data.calories) {
const nutritionInfo = data.nutrition;
const html = `
<h3>Nutrition Information:</h3>
<p>Food: ${nutritionInfo.food}</p>
<p>Calories: ${nutritionInfo.calories}</p>
<p>Protein: ${nutritionInfo.protein}</p>
<p>Fat: ${nutritionInfo.fat}</p>
<p>Carbohydrates: ${nutritionInfo.carbohydrates}</p>
`;
resultsDiv.innerHTML = html;
} else {
resultsDiv.innerHTML = `<p>No nutrition information found for this query.</p>`;
}
}
*/
function displayResults(data) {
const resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = ""; // Clear previous results
if (data.length === 0) {
resultsDiv.innerHTML = `<p>No nutrition information found for this query.</p>`;
} else {
const nutritionInfo = data[0];
const html = `
<h3>Nutrition Information:</h3>
<p>Food: ${nutritionInfo.name}</p>
<p>Calories: ${nutritionInfo.calories}</p>
<p>Protein: ${nutritionInfo.protein_g}</p>
<p>Fat: ${nutritionInfo.fat_total_g}</p>
<p>Carbohydrates: ${nutritionInfo.carbohydrates_total_g}</p>
`;
resultsDiv.innerHTML = html;
}
}