Lakshanya Srikanth

Food Donation Form - Copy this Html, Tailwind Component to your project

add this date conceptcode fully in my below code and givre full updated code please. the idea funtionality used here for food type and pickup date , use it in below ,add the functionality and give updated code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Food Waste Management</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">  <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore-compat.js"></script> <style> body { background-color: #e0f7fa; font-family: 'Arial', sans-serif; } .container { margin-top: 50px; background-color: #ffffff; padding: 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); animation: fadeIn 1.5s ease; } h2 { color: #00796b; font-weight: bold; text-align: center; animation: slideIn 1s ease; } .ecogenesis-heading { font-size: 30px; color: #00796b; text-align: center; margin-bottom: 40px; font-family: 'Arial', sans-serif; } .card { border-radius: 12px; border: none; background-color: #f1f8e9; } .btn-primary { background-color: #4caf50; border: none; } .btn-primary:hover { background-color: #388e3c; } .form-label { color: #00695c; font-weight: bold; text-align: center; } .food-type-group { display: flex; flex-wrap: wrap; gap: 20px; /* Adjust spacing between items */ justify-content: center; /* Aligns items to the center */ align-items: center; } .food-label { display: flex; flex-direction: column; /* Aligns image and text vertically */ align-items: center; justify-content: center; width: 140px; /* Consistent width for all items */ padding: 10px; border: 1px solid #ccc; /* Optional border for better visibility */ border-radius: 8px; background-color: #f9fbe7; text-align: center; } .food-label img { width: 50px; /* Adjust image size */ height: 50px; margin-bottom: 5px; /* Space between image and label */ } .food-label input[type="checkbox"] { margin-top: 5px; } .food-label input[type="number"] { margin-top: 5px; display: none; width: 40px; /* Reduced width for smaller input */ height: 30px; /* Adjust height */ font-size: 14px; text-align: center; } /* Centering the label */ .food-type-title { text-align: center; font-weight: bold; color: #00695c; font-size: 18px; margin-bottom: 10px; } .time-select { margin-bottom: 15px; } footer { margin-top: 30px; text-align: center; color: #004d40; font-size: 14px; } /* Animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } </style> </head> <body> <nav class="bg-green-300 p-5 shadow-md rounded-b-lg"> <div class="flex justify-between items-center max-w-7xl mx-auto"> <h1 class="text-black text-3xl font-extrabold tracking-wide">EcoGenesis</h1> <div class="flex space-x-6">  <button class="bg-green-400 hover:bg-green-500 text-black px-6 py-3 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105"> Donate Food </button>  <a href="food_waste_tracking.html" class="bg-green-400 hover:bg-green-500 text-black px-6 py-3 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105"> Keep Track of Your Donation </a> </div> </div> </nav> <div class="container"> <h2 class="text-center mb-4">Food Waste Registration Form</h2> <div class="ecogenesis-heading"> <p>By donating your excess food, you are contributing to a sustainable future and helping those in need. Let’s make a difference together.</p> </div> <div class="card p-4">  <form id="wasteForm"> <div class="mb-3"> <label for="name" class="form-label">Name</label> <input type="text" class="form-control" id="name" required> </div> <div class="mb-3"> <label for="contact" class="form-label">Contact No.</label> <input type="tel" class="form-control" id="contact" required> </div> <div class="mb-3"> <label for="email" class="form-label">Email</label> <input type="email" class="form-control" id="email" required> </div> <div class="mb-3"> <label for="location" class="form-label">Location</label> <input type="text" class="form-control" id="location" required> </div> <div class="mb-3"> <label for="pincode" class="form-label">Pincode</label> <input type="text" class="form-control" id="pincode" required> </div> <div class="food-type-group" > <label for="foodType" class="form-label">Type of Food Waste</label><br>  <div class="food-label"> <img src="images/rice.jpg" alt="Rice" class="food-image"> <input type="checkbox" id="foodRice" value="Rice"> Rice </div> <input type="number" id="quantityRice" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/bread.jpg" alt="Bread" class="food-image"> <input type="checkbox" id="foodBread" value="Bread"> Bread </div> <input type="number" id="quantityBread" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/veg.jpg" alt="Vegetables" class="food-image"> <input type="checkbox" id="foodVegetables" value="Vegetables"> Vegetables </div> <input type="number" id="quantityVegetables" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/fruits.jpg" alt="Fruits" class="food-image"> <input type="checkbox" id="foodFruits" value="Fruits"> Fruits </div> <input type="number" id="quantityFruits" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/dairy.jpg" alt="Dairy" class="food-image"> <input type="checkbox" id="foodDairy" value="Dairy Products"> Dairy Products </div> <input type="number" id="quantityDairy" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/meat.jpg" alt="Meat" class="food-image"> <input type="checkbox" id="foodMeat" value="Meat"> Meat </div> <input type="number" id="quantityMeat" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/sea.jpg" alt="Seafood" class="food-image"> <input type="checkbox" id="foodSeafood" value="Seafood"> Seafood </div> <input type="number" id="quantitySeafood" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/grains.jpg" alt="Grains" class="food-image"> <input type="checkbox" id="foodGrains" value="Grains"> Grains </div> <input type="number" id="quantityGrains" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/provision.jpg" alt="Provision Food" class="food-image"> <input type="checkbox" id="foodProvision" value="Provision Food"> Provision Food </div> <input type="number" id="quantityProvision" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/process.jpg" alt="Process Food" class="food-image"> <input type="checkbox" id="foodProcess" value="Process Food"> Process Food </div> <input type="number" id="quantityProcess" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br>  <div class="food-label"> <img src="images/frozen.jpg" alt="Frozen Food" class="food-image"> <input type="checkbox" id="foodFrozen" value="Frozen Food"> Frozen Food </div> <input type="number" id="quantityFrozen" class="form-control mt-2" placeholder="Quantity (kg)" style="display:none;" min="0.1" step="0.1"> <br> </div> <div class="space-y-4"> <div> <label class="text-sm font-medium text-gray-700">Current Food State </label> <div class="mt-2 space-y-2"> <div class="flex items-center"> <input type="radio" name="foodType" id="highlyPerishable" value="highly" class="h-4 w-4 text-indigo-600 border-gray-300" required> <label for="highlyPerishable" class="ml-3 block text-sm text-gray-700">Highly Perishable (24 hours)</label> </div> <div class="flex items-center"> <input type="radio" name="foodType" id="semiPerishable" value="semi" class="h-4 w-4 text-indigo-600 border-gray-300"> <label for="semiPerishable" class="ml-3 block text-sm text-gray-700">Semi-Perishable (2-3 days)</label> </div> <div class="flex items-center"> <input type="radio" name="foodType" id="nonPerishable" value="non" class="h-4 w-4 text-indigo-600 border-gray-300"> <label for="nonPerishable" class="ml-3 block text-sm text-gray-700">Non-Perishable (7 days)</label> </div> </div> </div> <div class="relative"> <label for="pickupDate" class="block text-sm font-medium text-gray-700">Pickup Date</label> <input type="date" id="pickupDate" name="pickupDate" required class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" aria-describedby="dateHelp"> <p id="dateHelp" class="mt-1 text-sm text-gray-500"></p> </div> <div class="time-select"> <label for="time" class="form-label">Pickup Time</label> <select id="time" class="form-select" required> <option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option> <option value="12:30 PM - 2:00 PM">12:30 PM - 2:00 PM</option> <option value="2:30 PM - 5:00 PM">2:30 PM - 5:00 PM</option> </select> </div> <div class="text-center"> <button type="submit" class="btn btn-primary btn-lg">Submit Request</button> </div> </form> </div> </div> <footer> <p>© 2025 Food Waste Management Initiative. Together, we can make a difference!</p> </footer> <script> // Firebase configuration const firebaseConfig = { apiKey: "AIzaSyDzPWkXG7iRbP5S7AYd3_9_H5vt2ecoQQc", authDomain: "ecogenesis-68113.firebaseapp.com", projectId: "ecogenesis-68113", storageBucket: "ecogenesis-68113.firebasestorage.app", messagingSenderId: "722686085983", appId: "1:722686085983:web:0a81b9a75f4756c5c704ea" }; // Initialize Firebase const app = firebase.initializeApp(firebaseConfig); const db = firebase.firestore(app); // Function to toggle visibility of quantity input fields based on checkbox function toggleQuantityField(foodType, show) { const quantityField = document.getElementById('quantity' + foodType.charAt(0).toUpperCase() + foodType.slice(1)); if (show) { quantityField.style.display = 'block'; } else { quantityField.style.display = 'none'; } } // Listen for changes on the food type checkboxes to toggle visibility document.getElementById('foodRice').addEventListener('change', function() { toggleQuantityField('Rice', this.checked); }); document.getElementById('foodBread').addEventListener('change', function() { toggleQuantityField('Bread', this.checked); }); document.getElementById('foodVegetables').addEventListener('change', function() { toggleQuantityField('Vegetables', this.checked); }); document.getElementById('foodFruits').addEventListener('change', function() { toggleQuantityField('Fruits', this.checked); }); document.getElementById('foodDairy').addEventListener('change', function() { toggleQuantityField('Dairy', this.checked); }); document.getElementById('foodMeat').addEventListener('change', function() { toggleQuantityField('Meat', this.checked); }); document.getElementById('foodSeafood').addEventListener('change', function() { toggleQuantityField('Seafood', this.checked); }); document.getElementById('foodGrains').addEventListener('change', function() { toggleQuantityField('Grains', this.checked); }); document.addEventListener("DOMContentLoaded", function() { const dateInput = document.getElementById("pickupDate"); const dateHelp = document.getElementById("dateHelp"); function setDateConstraints(foodType) { const today = new Date(); const maxDate = new Date(); switch(foodType) { case "highly": dateInput.value = today.toISOString().split("T")[0]; dateInput.readOnly = true; dateHelp.textContent = "Must be picked up within 24 hours"; break; case "semi": maxDate.setDate(today.getDate() + 3); dateInput.min = today.toISOString().split("T")[0]; dateInput.max = maxDate.toISOString().split("T")[0]; dateInput.readOnly = false; dateHelp.textContent = "Select a date within next 3 days"; break; case "non": maxDate.setDate(today.getDate() + 7); dateInput.min = today.toISOString().split("T")[0]; dateInput.max = maxDate.toISOString().split("T")[0]; dateInput.readOnly = false; dateHelp.textContent = "Select a date within next 7 days"; break; } } foodTypeInputs.forEach(input => { input.addEventListener("change", (e) => { setDateConstraints(e.target.value); }); }); }); // Function to set today's date if the food needs to be donated today // Function to handle food selection and check if it needs to be donated today function handleFoodSelection() { const foodWasteToday = [ 'Rice', 'Bread', 'Vegetables', 'Fruits', 'Dairy', 'Meat', 'Seafood', 'Grains' ]; // List of food items that need to be donated today let isTodayRequired = false; if (document.getElementById('foodRice').checked) { isTodayRequired = true; } else if (document.getElementById('foodBread').checked) { isTodayRequired = true; } else if (document.getElementById('foodVegetables').checked) { isTodayRequired = true; } else if (document.getElementById('foodFruits').checked) { isTodayRequired = true; } else if (document.getElementById('foodDairy').checked) { isTodayRequired = true; } else if (document.getElementById('foodMeat').checked) { isTodayRequired = true; } else if (document.getElementById('foodSeafood').checked) { isTodayRequired = true; } else if (document.getElementById('foodGrains').checked) { isTodayRequired = true; } // Set the pickup date to today if any food item needs to be donated today if (isTodayRequired) { setPickupDateForToday(); } } // Listen for changes on food type checkboxes to check if donation is required today document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => { checkbox.addEventListener('change', handleFoodSelection); }); // Call handleFoodSelection when the page loads to check the initial state window.onload = handleFoodSelection; // Handle form submission document.getElementById('wasteForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; const contact = document.getElementById('contact').value; const email = document.getElementById('email').value; const location = document.getElementById('location').value; const pincode = document.getElementById('pincode').value; const date = document.getElementById('date').value; const time = document.getElementById('time').value; // Food waste data collection const foodWaste = []; if (document.getElementById('foodRice').checked) { foodWaste.push({ type: 'Rice', quantity: document.getElementById('quantityRice').value }); } if (document.getElementById('foodBread').checked) { foodWaste.push({ type: 'Bread', quantity: document.getElementById('quantityBread').value }); } if (document.getElementById('foodVegetables').checked) { foodWaste.push({ type: 'Vegetables', quantity: document.getElementById('quantityVegetables').value }); } if (document.getElementById('foodFruits').checked) { foodWaste.push({ type: 'Fruits', quantity: document.getElementById('quantityFruits').value }); } if (document.getElementById('foodDairy').checked) { foodWaste.push({ type: 'Dairy Products', quantity: document.getElementById('quantityDairy').value }); } if (document.getElementById('foodMeat').checked) { foodWaste.push({ type: 'Meat', quantity: document.getElementById('quantityMeat').value }); } if (document.getElementById('foodSeafood').checked) { foodWaste.push({ type: 'Seafood', quantity: document.getElementById('quantitySeafood').value }); } if (document.getElementById('foodGrains').checked) { foodWaste.push({ type: 'Grains', quantity: document.getElementById('quantityGrains').value }); } // Save data to Firebase Firestore db.collection('requests').add({ name: name, contact: contact, email: email, location: location, pincode: pincode, date: date, time: time, foodWaste: foodWaste, status: 'Pending' // Add a status field to indicate the request's status }) .then(function(docRef) { alert('Your food waste request has been submitted successfully.'); // Redirect to the status page with the request ID window.location.href = "status.html"; }) .catch(function(error) { console.error('Error adding document: ', error); }); }); </script> </body> </html>

Prompt

About

Food Donation Form - A user-friendly interface for NGOs to register, featuring organization details, food capacity, and automatic pick. Download free code!

Food Donation Form - Copy this Html, Tailwind Component to your project

About

Tags

Share