foodapp

package.json

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "^5.3.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +1,147 @@
-.App {
-  text-align: center;
+*{
+  margin: 0px;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.item-wrapper{
+  height: 200px;
+  width: 200px;
+  background-color:rgb(250, 250, 196);
+  border-radius: 5px;
+ margin: 50px;
+ box-shadow: 1px 1px 12px 5px rgb(222, 243, 191);
+  /* border-style: ridge;
+  border-color:rgb(211, 241, 163); 
+  border-width: 5px;
+   */
+}
+.item-wrapper:hover {
+  box-shadow:1px 1px 6px 5px rgb(200, 236, 147);
+  background-color:rgb(241, 241, 141);
+  border-radius: 10px;
+}
+.Home-wrapper{
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top:30px;
+
+}
+.item-image{
+  height: 150px;
+  width: 150px;
+  border-radius:50%;
+  margin-top:25px;
+  margin-left: 25px;
+
+}
+.item-name{
+  text-align: center;
+  color:black;
+  text-decoration: none;
+}
+.header-wrapper{
+  background-color: palevioletred;
+
+  height: 70px;
+  text-align:center;
+  padding-top:20px;
+}
+h1{
+  color: blueviolet;
+}
+.cart-icon{
+  float:right;
+  color: white;
+  margin-right: 20px;
+
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.product-wrapper>h2{
+  text-align:center;
+  margin-top:20px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
+.product-item-wrapper{
+  display:flex;
+  flex-direction: row;
+  /* justify-content: center; */
+  border-bottom:2px dotted;
+  padding-top: 25px;
+}
+.product-image{
+  height: 150px;
+  width: 150px;
+
+}
+.product-image>img{
+  height: 120px;
+  width: 150px;
+  border-radius:50%;
+
+}
+.product-details{
+  width:70%;
+  display:flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+  padding-left:10px;
+  align-content: space-between;
+}
+.product-btn{
+  width:20%;
+  height: 40px;
+  margin-top: 20px;
   color: white;
+  background-color:palevioletred;
+ border: 1px solid rgb(231, 84, 133);
+
+}
+.product-btn:hover{
+  border:blueviolet 2px solid;
+
+}
+.product-btn:active{
+  color:rgb(238, 9, 85);
 }
+.product-description{
+  color:rgb(163, 155, 155);
+}
+.cart-title{
+  font-size: 30px;
+  font-style:bold;
+  margin-left:45%;
+
+}
+.place-order{
+  margin-right: 10px;
+  margin-top: 5px;
+  text-decoration: none;
+ float: right;
+}
+.place-order:hover{
+  color:red;
+}
+.empty-cart{
+  color:red;
+  margin-left: 45%;
 
-.App-link {
-  color: #61dafb;
+}
+.price-card{
+  margin-left:30px;
+  margin-top:10px;
+  font-size:25px;
+}
+.cancle-btn{
+  width: 40px;
+  height: 25px;
+  border-radius:50%;
+  border:white;
+  float: right;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.triangle-left{
+  margin-right: 5px;
+}
+.triangle-right{
+  margin-left: 5px;
 }

src/App.js

@@ -1,25 +1,49 @@
-import logo from './logo.svg';
+
 import './App.css';
+import React,{useState, useEffect} from 'react';
+import {BrowserRouter,Routes,Route} from 'react-router-dom';
+import Pizza from './Components/Pizza';
+import Burger from './Components/Burger';
+import Home from './Components/Home';
+import Cart from './Components/Cart';
+import Header from './Components/Header';
+import axios from 'axios';
 
+let url="https://fod-app.herokuapp.com/food";
+export const FoodContext= React.createContext();
 function App() {
-  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>
-  );
+    let [data,setData]=useState([]);
+    let [cart,setCart]=useState([]);
+    let [cartValue,setCartValue]=useState(0);
+
+  useEffect(()=>{
+    getData();
+  },[])
+
+  let getData=async()=>{
+    let response= await axios.get(url);
+    //console.log(response.data);
+    setData(response.data);
+  }
+
+  return <>
+  <BrowserRouter>
+    <FoodContext.Provider value={{data,cart,setCart,cartValue,setCartValue}}>
+      <Header/>
+      <Routes>
+        <Route path='/pizza' element={<Pizza/>}/>
+        <Route path='/burger' element={<Burger/>}/>
+        <Route path='/cart' element={<Cart/>}/>
+        <Route path='/' element={<Home/>}/>
+      </Routes>
+
+    </FoodContext.Provider>
+
+
+  </BrowserRouter>
+
+
+  </>
 }
 
 export default App;

src/Components/Burger.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {useContext} from 'react';
+import {FoodContext} from '../App';
+import {useState, useEffect} from 'react';
+import {useNavigate} from 'react-router-dom';
+
+function Burger() {
+  let context = useContext(FoodContext);
+  let [products,setProducts]=useState([])
+  let navigate=useNavigate();
+let getData=()=>{
+  if(context.data.length>0){
+    setProducts(context.data[1].subItemsData.subItems)
+  }
+  else{
+    navigate('/')
+  }
+}
+
+useEffect(()=>{getData()},[])
+
+  return <div className="product-wrapper">
+    <h2>Tasty Burger</h2>
+    {
+    products.map((b,i)=>{
+      return <div className="product-item-wrapper" key={i}>
+        <div className="product-details">
+          <b>{b.name}</b>
+        <div className="product-price">&#8377; {b.price}</div>
+        <div className="product-description">{b.description}</div>
+        <button className="product-btn" onClick={()=>{
+          context.cart.push(b);
+          context.setCartValue(context.cart.length)
+        }}>Add to cart</button>
+        </div>
+
+        <div className="product-image">
+          <img src={b.image} alt={b.name}/>
+        </div>
+
+      </div>
+    })
+ }
+  </div>
+}
+
+export default Burger
+