done

package.json

@@ -6,9 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,25 +1,62 @@
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import foods from './foods.json';
+import {Button, Row, Col, Alert } from 'antd';
+import FoodBox from './components/FoodBox';
+import AddFoodForm from './components/AddFoodForm';
+import Search from './components/Search';
 
 function App() {
+  const [foodList, setFoodList] = useState(foods);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const deleteFood = (index) => {
+    const updatedList = [...foodList];
+    updatedList.splice(index, 1);
+    setFoodList(updatedList);
+  };
+
+  const addFood = (newFood) => {
+    setFoodList([...foodList, newFood]);
+    setShowAddForm(false);
+  };
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <h1>Food List</h1>
+
+      <Search value={searchTerm} onChange={setSearchTerm} />
+      <Row gutter={[16, 16]}>
+        {foodList
+            .filter((food) =>
+              food.name.toLowerCase().includes(searchTerm.toLowerCase())
+            )
+            .map((food, index) => (
+              <Col key={index} xs={24} sm={12} md={8} lg={6}>
+                <FoodBox food={food} onDelete={() => deleteFood(index)} />
+              </Col>
+          ))}
+      </Row>
+      <Button onClick={() => setShowAddForm(!showAddForm)}>
+        {showAddForm ? 'Hide Form' : 'Add New Food'}
+      </Button>
+      {showAddForm && <AddFoodForm onAdd={addFood} />}
+
+      {(foodList.length === 0 || 
+        (foodList.filter((food) =>
+          food.name.toLowerCase().includes(searchTerm.toLowerCase())
+        ).length === 0)) && (
+        <Alert
+          message="No matching food items found. Please try a different search term or add some food."
+          type="info"
+          showIcon
+          style={{ margin: '16px 200px 0px 200px' }}
+        />
+      )}
+
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/AddFoodForm.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Input, Button } from 'antd'; 
+//import 'antd/dist/antd.css';
+
+const AddFoodForm = ({ onAddFood }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    image: '',
+    calories: '',
+    servings: '',
+  });
+
+  const handleChange = (e, field) => {
+    setFormData({
+      ...formData,
+      [field]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onAddFood(formData);
+    // Clear form fields after submission
+    setFormData({
+      name: '',
+      image: '',
+      calories: '',
+      servings: '',
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Input
+        value={formData.name}
+        onChange={(e) => handleChange(e, 'name')}
+        placeholder="Name"
+      />
+      <Input
+        value={formData.image}
+        onChange={(e) => handleChange(e, 'image')}
+        placeholder="Image URL"
+      />
+      <Input
+        value={formData.calories}
+        onChange={(e) => handleChange(e, 'calories')}
+        type="number"
+        placeholder="Calories"
+      />
+      <Input
+        value={formData.servings}
+        onChange={(e) => handleChange(e, 'servings')}
+        type="number"
+        placeholder="Servings"
+      />
+      <Button type="primary" htmlType="submit">
+        Add Food
+      </Button>
+    </form>
+  );
+};
+
+export default AddFoodForm;

src/components/FoodBox.css

@@ -0,0 +1,7 @@
+.food-section {
+    margin: 20px;
+    border: 1px solid #606060;
+    border-radius: 5px;
+    padding: 1px;
+    display:inline-table;
+  }

src/components/FoodBox.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Col, Card, Button } from 'antd'; // Assuming you're using Ant Design components
+import "./FoodBox.css"
+
+
+
+function FoodBox(props) {
+  const { name, calories, image, servings } = props.food;
+
+  return (
+    <div className='food-section'>
+      <Col>
+      <Card
+        title={name}
+        style={{ width: 230, height: 300, margin: 10 }}
+      >
+        <img src={image} height={60} alt={name} />
+        <p>Calories: {calories}</p>
+        <p>Servings: {servings}</p>
+        <p>
+          <b>Total Calories: {calories * servings}</b> kcal
+        </p>
+        <Button type="primary">Delete</Button>
+      </Card>
+    </Col>
+
+    </div>
+
+  );
+}
+
+export default FoodBox;

src/components/Search.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Input } from 'antd';
+
+const Search = ({ value, onChange }) => {
+  return (
+    <div style={{margin: "0px 200px 0px 200px"}}>
+        <Input
+        placeholder="Search Food..."
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        />
+    </div>
+  );
+};
+
+export default Search;

src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'antd/dist/antd';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(