Create app.js

add app.js file #1

app.js

@@ -0,0 +1,38 @@
+document.getElementById('nutrition-form').addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    const foodItem = document.getElementById('food-item').value;
+    const appId = '17a4af6b';
+    const appKey = '064ee9e47927d4e994c8b4fe40bc02e9';
+    const url = `https://api.edamam.com/api/nutrition-data?app_id=${appId}&app_key=${appKey}&ingr=${foodItem}`;
+
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            displayNutritionFacts(data);
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+        });
+});
+
+function displayNutritionFacts(data) {
+    const nutritionFacts = document.getElementById('nutrition-facts');
+    nutritionFacts.innerHTML = `
+        <h2 class="text-xl font-bold mb-2">Nutrition Facts</h2>
+        <p><strong>Amount Per Serving</strong></p>
+        <p>Calories: ${data.calories}</p>
+        <p>Total Fat: ${data.totalNutrients.FAT ? data.totalNutrients.FAT.quantity : 0} g (${data.totalDaily.FAT ? data.totalDaily.FAT.quantity : 0} %)</p>
+        <p>Saturated Fat: ${data.totalNutrients.FASAT ? data.totalNutrients.FASAT.quantity : 0} g (${data.totalDaily.FASAT ? data.totalDaily.FASAT.quantity : 0} %)</p>
+        <p>Cholesterol: ${data.totalNutrients.CHOLE ? data.totalNutrients.CHOLE.quantity : 0} mg (${data.totalDaily.CHOLE ? data.totalDaily.CHOLE.quantity : 0} %)</p>
+        <p>Sodium: ${data.totalNutrients.NA ? data.totalNutrients.NA.quantity : 0} mg (${data.totalDaily.NA ? data.totalDaily.NA.quantity : 0} %)</p>
+        <p>Total Carbohydrate: ${data.totalNutrients.CHOCDF ? data.totalNutrients.CHOCDF.quantity : 0} g (${data.totalDaily.CHOCDF ? data.totalDaily.CHOCDF.quantity : 0} %)</p>
+        <p>Dietary Fiber: ${data.totalNutrients.FIBTG ? data.totalNutrients.FIBTG.quantity : 0} g</p>
+        <p>Total Sugars: ${data.totalNutrients.SUGAR ? data.totalNutrients.SUGAR.quantity : 0} g</p>
+        <p>Protein: ${data.totalNutrients.PROCNT ? data.totalNutrients.PROCNT.quantity : 0} g (${data.totalDaily.PROCNT ? data.totalDaily.PROCNT.quantity : 0} %)</p>
+        <p>Vitamin D: ${data.totalNutrients.VITD ? data.totalNutrients.VITD.quantity : 0} µg (${data.totalDaily.VITD ? data.totalDaily.VITD.quantity : 0} %)</p>
+        <p>Calcium: ${data.totalNutrients.CA ? data.totalNutrients.CA.quantity : 0} mg (${data.totalDaily.CA ? data.totalDaily.CA.quantity : 0} %)</p>
+        <p>Iron: ${data.totalNutrients.FE ? data.totalNutrients.FE.quantity : 0} mg (${data.totalDaily.FE ? data.totalDaily.FE.quantity : 0} %)</p>
+        <p>Potassium: ${data.totalNutrients.K ? data.totalNutrients.K.quantity : 0} mg (${data.totalDaily.K ? data.totalDaily.K.quantity : 0} %)</p>
+    `;
+}