veggies.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VEGGIES</title>
    <link rel="stylesheet" href="veggies.css">
</head>
<body>
    <div class="picture-container">
        <img class="picture" src="veggies.png">
    </div>
    <div class="address">
        Address: IIT Kharagpur, Kharagpur,<br>
        West Bengal 721302
    </div>
    <input type="text" id="searchInput" placeholder="Search for a dish">
    <ul id="searchResults"></ul>

    <script>
        const searchInput = document.getElementById('searchInput');
        const searchResults = document.getElementById('searchResults');

const dishes = [
  'Pizza',
  'Burger',
  'Pasta',
  'Sushi',
  'Salad',
  'ice cream',
  'coke'
];

searchInput.addEventListener('input', function() {
  const searchTerm = searchInput.value.toLowerCase();
  const filteredDishes = dishes.filter(dish => dish.toLowerCase().includes(searchTerm));
  displaySearchResults(filteredDishes);
});

function displaySearchResults(results) {
  searchResults.innerHTML = '';

  if (results.length === 0) {
    searchResults.innerHTML = '<li>No results found</li>';
    return;
  }

  results.forEach(result => {
    const li = document.createElement('li');
    li.innerHTML = result;
    searchResults.appendChild(li);
  });
}

    </script>
    <textarea id="comments" placeholder="Enter your comments" rows="4" columns="50"></textarea>
</body>
</html>