apna-college · priyanshi-pc · Dec 2, 2025
diff --git a/food-api-project/app.js b/food-api-project/app.js
@@ -0,0 +1,54 @@
+async function getProduct(barcode) {
+    let url = `https://world.openfoodfacts.org/api/v0/product/${barcode}.json`;
+
+    let res = await fetch(url);
+    let data = await res.json();
+
+    return data;  
+}
+
+document.querySelector("#searchBtn").addEventListener("click", async () => {
+    let barcode = document.querySelector("#codeInput").value.trim();
+
+    if (!barcode) {
+        alert("Please enter a barcode");
+        return;
+    }
+
+    let data = await getProduct(barcode);
+    console.log(data);
+
+    if (data.status === 0) {
+        alert("Product not found");
+        return;
+    }
+
+    let p = data.product;
+
+    document.querySelector("#result").classList.remove("hidden");
+
+
+    document.querySelector("#productImg").src = p.image_url || "";
+
+
+    document.querySelector("#productName").innerText =
+        p.product_name || "No name available";
+
+
+    document.querySelector("#brand").innerText =
+        p.brands || "Not available";
+
+
+    let ingList = document.querySelector("#ingredientsList");
+    ingList.innerHTML = "";
+
+    if (p.ingredients && p.ingredients.length > 0) {
+        for (let ing of p.ingredients) {
+            let li = document.createElement("li");
+            li.innerText = ing.text || ing.id;  
+            ingList.appendChild(li);
+        }
+    } else {
+        ingList.innerHTML = "<li>No ingredients available</li>";
+    }
+});
diff --git a/food-api-project/index.html b/food-api-project/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GET FOOD DETAILS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="container">
+        <h2>Food Product Search</h2>
+
+        <input id="codeInput" type="text" placeholder="Enter Barcode (e.g. 73017624010701)">
+        <button id="searchBtn">Search</button>
+
+        <div id="result" class="card hidden">
+            <img id="productImg" src="" alt="Product Image">
+
+            <h3 id="productName"></h3>
+            <p><strong>Brand:</strong> <span id="brand"></span></p>
+            <p><strong>Ingredients:</strong></p>
+            <ul id="ingredientsList"></ul>
+        </div>
+
+    </div>
+
+    <script src="app.js"></script> 
+
+</body>
+</html>
diff --git a/food-api-project/readme.md b/food-api-project/readme.md
@@ -0,0 +1,13 @@
+Food Product Lookup
+It's a mini-project utilizing a free food API to retrieve food-related details. It uses the OpenFoodFacts API, a free and open-source food database
+
+Working : users search for food product details using a barcode.
+When users enter any product barcode, the wep-page displays:
+
+Product name
+Brand
+Product image
+Ingredients list
+
+Tech stack : 
+The project is built using HTML CSS and JAVASCRIPT
diff --git a/food-api-project/style.css b/food-api-project/style.css
@@ -0,0 +1,44 @@
+body {
+    font-family: Arial;
+    background: #f7f7f7;
+}
+
+.container {
+    width: 350px;
+    margin: 40px auto;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 0 10px #ddd;
+}
+
+input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background: black;
+    color: white;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+.card {
+    border-top: 1px solid #ddd;
+    padding-top: 20px;
+}
+
+.card.hidden {
+    display: none;
+}
+
+img {
+    width: 100%;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}