Merge pull request #949 from rixvi0123/main

recipe nutrition file added
iamrahulmahato · Oct 10, 2024 · 5f741ae · 5f741ae
2 parents b966a10 + 889ed48
commit 5f741ae
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 0 deletions.
diff --git a/assets/image/nutrition.webp b/assets/image/nutrition.webp
diff --git a/index.html b/index.html
@@ -96,6 +96,19 @@ <h3 class="card-heading">Counter</h3>
                     </p>
                 </div>
             </a>
+             <a href="./projects/Nutrition Chart/Nutrion.html" class="card" target="_blank">
+                <div class="card-cover">
+                    <img src="./assets/image/nutrition.webp" alt="Counter">
+                </div>
+                <div class="card-content">
+                    <h3 class="card-heading">Recipe Nutrition</h3>
+                    <p class="card-description">
+                      Recipe Nutrition Search to give Nutritional data
+                    </p>
+                </div>
+            </a>
+
+
             <a href="./projects/APOD/index.html" class="card" target="_blank">
                 <div class="card-cover ">
                     <img src="./assets/image/apod-logo.webp" alt="">

diff --git a/projects/Nutrition Chart/Nutrion.html b/projects/Nutrition Chart/Nutrion.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nutritional Data</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            /* ADNAN RIZVI*/
+            font-family: 'Roboto', sans-serif;
+            background: linear-gradient(to right, #ffcccb, #ffebcd); /* Gradient background */
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh; /* Full height */
+        }
+
+        #container {
+            background-color: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            padding: 20px;
+            width: 80%; /* Responsive width */
+            max-width: 800px; /* Max width */
+            text-align: center; /* Center align text */
+        }
+
+        h1 {
+             /* ADNAN RIZVI*/
+            margin-bottom: 20px;
+            color: #333; /* Dark color for the heading */
+        }
+
+        input[type="text"] {
+            width: 70%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+        }
+         /* ADNAN RIZVI*/
+
+        #searchButton {
+            padding: 10px 15px;
+            background-color: #28a745;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-left: 10px; /* Space between input and button */
+        }
+
+        #searchButton:hover {
+            background-color: #218838; /* Darker green on hover */
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px; /* Space above the table */
+        }
+
+        th, td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+
+        th {
+            background-color: #f2f2f2;
+        }
+
+        tr:hover {
+            background-color: #f1f1f1; /* Highlight row on hover */
+        }
+    </style>
+</head>
+<body>
+
+<div id="container">
+    <h1>Recipe Nutrition Search</h1>
+    <input type="text" id="foodInput" placeholder="Enter food item...">
+    <button id="searchButton">Search</button>
+
+    <table id="resultTable">
+        <thead>
+            <tr>
+                <th>Food</th>
+                <th>Calories</th>
+                <th>Proteins (g)</th>
+                <th>Fats (g)</th>
+                <th>Carbohydrates (g)</th>
+                <th>Sugar (g)</th>
+                <th>Fibres (g)</th>
+                <th>Salt (g)</th>
+            </tr>
+        </thead>
+        <tbody id="resultBody">
+            <!-- Data will be populated here -->
+        </tbody>
+    </table>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/Nutrition Chart/script.js b/projects/Nutrition Chart/script.js
@@ -0,0 +1,68 @@
+const searchFood = async (foodItem) => {
+    const url = `https://nutritional-data.p.rapidapi.com/?name=${encodeURIComponent(foodItem)}&lang=en`;
+    const options = {
+        method: 'GET',
+        headers: {
+            'x-rapidapi-key': '1820404946msh21b6f01612b6377p1ba0b7jsn20b411379445',
+            'x-rapidapi-host': 'nutritional-data.p.rapidapi.com'
+        }
+    };
+
+    try {
+        const response = await fetch(url, options);
+
+        if (!response.ok) {
+            throw new Error(`Error: ${response.status}`);
+        }
+
+        const data = await response.json(); 
+        const results = data.result;
+
+        if (results && results.length > 0) {
+            displayResults(results.slice(0, 5)); // Display the first 5 items
+        } else {
+            console.log('No related items found.');
+            clearTable(); // Clear table if no items found
+        }
+    } catch (error) {
+        console.error('Error fetching the data:', error);
+    }
+};
+
+const displayResults = (items) => {
+    const resultBody = document.getElementById('resultBody');
+    resultBody.innerHTML = ''; // Clear previous results
+
+    items.forEach(item => {
+        const row = document.createElement('tr');
+
+        // Create table cells for each item
+        row.innerHTML = `
+            <td>${item.name}</td>
+            <td>${item.calories}</td>
+            <td>${item.proteins}</td>
+            <td>${item.fat}</td>
+            <td>${item.carbohidrates}</td>
+            <td>${item.sugar}</td>
+            <td>${item.fibres}</td>
+            <td>${item.salt}</td>
+        `;
+
+        resultBody.appendChild(row); // Append the row to the table body
+    });
+};
+
+const clearTable = () => {
+    const resultBody = document.getElementById('resultBody');
+    resultBody.innerHTML = ''; // Clear table body
+};
+
+// Attach event listener to the search button
+document.getElementById('searchButton').addEventListener('click', () => {
+    const foodItem = document.getElementById('foodInput').value;
+    if (foodItem) {
+        searchFood(foodItem);
+    } else {
+        alert('Please enter a food item to search.');
+    }
+});