done

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.13.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/App.css

@@ -1,38 +1,20 @@
-.App {
+/* .App {
   text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+} */
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.foodImage {
+  width: 150px;
+  height: auto;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.foodBoxes {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  flex-flow: row wrap;
+  justify-content: left;
+  align-content: space-between;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.foodFormAndSearchBarContainer {
+  display: flex;
+  justify-content: space-between;
+}

src/App.js

@@ -1,23 +1,63 @@
 import logo from './logo.svg';
 import './App.css';
+import foodData from './foods.json';
+import { useEffect, useState } from 'react';
+import FoodBox from './components/FoodBox';
+import AddFoodForm from './components/AddFoodForm';
+import SearchBar from './components/SearchBar';
 
 function App() {
+
+  const [foods, setFoods] = useState(foodData);
+  const [searchString, setSearchString] = useState('');
+
+  //iteration 2
+  const food = {
+    name: "Orange",
+    calories: 85,
+    image: "https://i.imgur.com/abKGOcv.jpg",
+    servings: 1
+  }
+
+  //to add food in the array on the click of the 'create' button in the Food form
+  function addFood(food) {
+    setFoods((prevFoods) => [food, ...prevFoods]);
+  }
+
+  //to update the search string and filter the array
+  function onSearchChange(newSearchString) {
+    setSearchString(newSearchString);
+  }
+
+  let filteredFoods = foods.filter((food) => {
+    return food.name.toLowerCase().startsWith(searchString.toLowerCase());
+  });
+
+  //to delete a food card on the click of the respective delete button
+  function deleteFood(foodToBeDeleted) {
+    console.log('delete food...');
+    setFoods((prevFoods) => {
+      return prevFoods.filter((food) => foodToBeDeleted !== food);
+    })
+  }
+
   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>
+      <div className='foodFormAndSearchBarContainer'>
+        <AddFoodForm addFood={addFood} />
+        <SearchBar onSearchChange={onSearchChange} />
+      </div>
+      <div className='foodBoxes'>
+        {filteredFoods.length === 0 ? (
+          <div>
+            <img src="https://static.thenounproject.com/png/523558-200.png" />
+            <p>No content to show!</p>
+          </div>
+        ) : (
+          filteredFoods.map((food) => (
+            <FoodBox food={food} deleteFood={deleteFood} />
+          )))}
+      </div>
     </div>
   );
 }

src/components/AddFoodForm.css

@@ -0,0 +1,26 @@
+.foodForm {
+    margin: 20px;
+    padding: 20px;
+    padding-bottom: 0px;
+
+    width: 500px;
+    height: fit-content;
+
+    border: solid black 1px;
+    border-radius: 15px;
+}
+
+label {
+    margin-bottom: 10px;
+    padding: 0px;
+}
+
+.input {
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+.createButton {
+    margin: 20px;
+    margin-left: 0px;
+}

src/components/AddFoodForm.js

@@ -0,0 +1,46 @@
+import { Input, Button } from 'antd';
+import React, { useState } from 'react';
+
+import './AddFoodForm.css';
+
+export default function AddFoodForm({ addFood }) {
+
+    const [form, setForm] = useState({
+        name: '',
+        image: '',
+        calories: 0,
+        servings: 0
+    })
+
+    function handleChange(event) {
+        const {id, value} = event.target;
+        console.log(id, value);
+        setForm({
+            ...form,
+            [id]: value
+        });
+        console.log(form);
+    }
+
+    function handleClick() {
+        addFood(form);
+    }
+
+    return (
+        <div className='foodForm'>
+            <label htmlFor='name'>Name</label>
+            <Input className='input' id="name" type="text" value={form.name} onChange={handleChange}/>
+
+            <label htmlFor='image'>Image</label>
+            <Input className='input' id="image" type="text" value={form.image} onChange={handleChange}/>
+
+            <label htmlFor='calories'>Calories</label>
+            <Input className='input' id="calories" type="text" value={form.calories} onChange={handleChange}/>
+
+            <label htmlFor='servings'>Servings</label>
+            <Input className='input' id="servings" type="number" value={form.servings} onChange={handleChange}/>
+
+            <Button className='createButton' type="default" size="large"  block="true" shape='round' onClick={handleClick}>Create</Button>
+        </div>
+    )
+}

src/components/FoodBox.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Col, Card, Button } from 'antd';
+
+export default function FoodBox(props) {
+
+    function handleDeleteClick() {
+        console.log('Handle delete click...');
+       props.deleteFood(props.food);
+    }
+
+    return (
+        <Col>
+            <Card
+                title={props.food.name}
+                style={{ width: 230, height: 300, margin: 10 }}
+            >   <img src={props.food.image} height={60} alt={props.food.name} />
+                    <p>Calories: {props.food.calories}</p>
+                    <p>Servings: {props.food.servings}</p>
+                    <p>
+                        <b>Total Calories: {props.food.calories} * {props.food.servings}</b> kcal
+                    </p>
+                    <Button type="primary" onClick={handleDeleteClick}> Delete </Button>
+            </Card>
+        </Col>
+    )
+}

src/components/SearchBar.css

@@ -0,0 +1,22 @@
+.searchBox {
+    margin: 10px;
+    padding: 10px;
+}
+
+.inputField {
+    width: 500px;
+    height: 30px;
+
+    float: right;
+}
+
+.searchHeading {
+    float: left;
+
+    font-size: 30px;
+
+    margin: 10px;
+    margin-top: 0px;
+    padding: 10px;
+    padding-top: 0px;
+}

src/components/SearchBar.js

@@ -0,0 +1,16 @@
+import './SearchBar.css';
+
+export default function SearchBar({onSearchChange}) {
+
+    function updateSearchString (event) {
+        const newSearchString = event.target.value;
+        onSearchChange(newSearchString);
+    }
+
+    return (
+        <div className="searchBox">
+            <h3 className='searchHeading'>Search</h3>
+            <input type="text" className='inputField' onChange={updateSearchString}/>
+        </div>
+    )
+}

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  Ant from 'antd';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(