Skip to content

Practice code for pizza menu #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Practice code for pizza menu #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
0a51366
Practice code for pizza menu
Sep 3, 2024
9d76fb8
Components, props, JSX
Sep 4, 2024
c613ea2
State overview
Sep 5, 2024
c23cc79
State management
Sep 10, 2024
ba9e134
Children prop
Sep 12, 2024
3f61adc
Thinking in React (Components, Composition, Reusability)
Sep 17, 2024
83e9ca6
How react works behind the scenes
Sep 23, 2024
022f439
How React works behind the scenes
Sep 24, 2024
5ba1449
UseEffect
Sep 25, 2024
3ff4427
Use Effect
Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 147 additions & 138 deletions 03-pizza-menu/final/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,100 +1,103 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

const pizzaData = [
{
name: "Focaccia",
ingredients: "Bread with italian olive oil and rosemary",
price: 6,
photoName: "pizzas/focaccia.jpg",
soldOut: false,
},
{
name: "Pizza Margherita",
ingredients: "Tomato and mozarella",
price: 10,
photoName: "pizzas/margherita.jpg",
soldOut: false,
},
{
name: "Pizza Spinaci",
ingredients: "Tomato, mozarella, spinach, and ricotta cheese",
price: 12,
photoName: "pizzas/spinaci.jpg",
soldOut: false,
},
{
name: "Pizza Funghi",
ingredients: "Tomato, mozarella, mushrooms, and onion",
price: 12,
photoName: "pizzas/funghi.jpg",
soldOut: false,
},
{
name: "Pizza Salamino",
ingredients: "Tomato, mozarella, and pepperoni",
price: 15,
photoName: "pizzas/salamino.jpg",
soldOut: true,
},
{
name: "Pizza Prosciutto",
ingredients: "Tomato, mozarella, ham, aragula, and burrata cheese",
price: 18,
photoName: "pizzas/prosciutto.jpg",
soldOut: false,
},
{
name: 'Focaccia',
ingredients: 'Bread with italian olive oil and rosemary',
price: 6,
photoName: 'pizzas/focaccia.jpg',
soldOut: false,
},
{
name: 'Pizza Margherita',
ingredients: 'Tomato and mozarella',
price: 10,
photoName: 'pizzas/margherita.jpg',
soldOut: false,
},
{
name: 'Pizza Spinaci',
ingredients: 'Tomato, mozarella, spinach, and ricotta cheese',
price: 12,
photoName: 'pizzas/spinaci.jpg',
soldOut: false,
},
{
name: 'Pizza Funghi',
ingredients: 'Tomato, mozarella, mushrooms, and onion',
price: 12,
photoName: 'pizzas/funghi.jpg',
soldOut: false,
},
{
name: 'Pizza Salamino',
ingredients: 'Tomato, mozarella, and pepperoni',
price: 15,
photoName: 'pizzas/salamino.jpg',
soldOut: true,
},
{
name: 'Pizza Prosciutto',
ingredients: 'Tomato, mozarella, ham, aragula, and burrata cheese',
price: 18,
photoName: 'pizzas/prosciutto.jpg',
soldOut: false,
},
];

function App() {
return (
<div className="container">
<Header />
<Menu />
<Footer />
</div>
);
return (
<div className='container'>
<Header />
<Menu />
<Footer />
</div>
);
}

function Header() {
// const style = { color: "red", fontSize: "48px", textTransform: "uppercase" };
const style = {};

return (
<header className="header">
<h1 style={style}>Fast React Pizza Co.</h1>
</header>
);
// const style = { color: "red", fontSize: "48px", textTransform: "uppercase" };
const style = {};

return (
<header className='header'>
<h1 style={style}>Fast React Pizza Co.</h1>
</header>
);
}

function Menu() {
const pizzas = pizzaData;
// const pizzas = [];
const numPizzas = pizzas.length;

return (
<main className="menu">
<h2>Our menu</h2>

{numPizzas > 0 ? (
<>
<p>
Authentic Italian cuisine. 6 creative dishes to choose from. All
from our stone oven, all organic, all delicious.
</p>

<ul className="pizzas">
{pizzas.map((pizza) => (
<Pizza pizzaObj={pizza} key={pizza.name} />
))}
</ul>
</>
) : (
<p>We're still working on our menu. Please come back later :)</p>
)}

{/* <Pizza
const pizzas = pizzaData;
// const pizzas = [];
const numPizzas = pizzas.length;

return (
<main className='menu'>
<h2>Our menu</h2>

{numPizzas > 0 ? (
<>
<p>
Authentic Italian cuisine. 6 creative dishes to choose from. All
from our stone oven, all organic, all delicious.
</p>

<ul className='pizzas'>
{pizzas.map((pizza) => (
<Pizza
pizzaObj={pizza}
key={pizza.name}
/>
))}
</ul>
</>
) : (
<p>We're still working on our menu. Please come back later :)</p>
)}

{/* <Pizza
name="Pizza Spinaci"
ingredients="Tomato, mozarella, spinach, and ricotta cheese"
photoName="pizzas/spinaci.jpg"
Expand All @@ -106,79 +109,85 @@ function Menu() {
price={12}
photoName="pizzas/funghi.jpg"
/> */}
</main>
);
</main>
);
}

function Pizza({ pizzaObj }) {
console.log(pizzaObj);
console.log(pizzaObj);

// if (pizzaObj.soldOut) return null;
// if (pizzaObj.soldOut) return null;

return (
<li className={`pizza ${pizzaObj.soldOut ? "sold-out" : ""}`}>
<img src={pizzaObj.photoName} alt={pizzaObj.name} />
<div>
<h3>{pizzaObj.name}</h3>
<p>{pizzaObj.ingredients}</p>
return (
<li className={`pizza ${pizzaObj.soldOut ? 'sold-out' : ''}`}>
<img
src={pizzaObj.photoName}
alt={pizzaObj.name}
/>
<div>
<h3>{pizzaObj.name}</h3>
<p>{pizzaObj.ingredients}</p>

{/* {pizzaObj.soldOut ? (
{/* {pizzaObj.soldOut ? (
<span>SOLD OUT</span>
) : (
<span>{pizzaObj.price}</span>
)} */}

<span>{pizzaObj.soldOut ? "SOLD OUT" : pizzaObj.price}</span>
</div>
</li>
);
<span>{pizzaObj.soldOut ? 'SOLD OUT' : pizzaObj.price}</span>
</div>
</li>
);
}

function Footer() {
const hour = new Date().getHours();
const openHour = 12;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);

// if (hour >= openHour && hour <= closeHour) alert("We're currently open!");
// else alert("Sorry we're closed");

// if (!isOpen) return <p>CLOSED</p>;

return (
<footer className="footer">
{isOpen ? (
<Order closeHour={closeHour} openHour={openHour} />
) : (
<p>
We're happy to welcome you between {openHour}:00 and {closeHour}:00.
</p>
)}
</footer>
);

// return React.createElement("footer", null, "We're currently open!");
const hour = new Date().getHours();
const openHour = 12;
const closeHour = 22;
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);

// if (hour >= openHour && hour <= closeHour) alert("We're currently open!");
// else alert("Sorry we're closed");

// if (!isOpen) return <p>CLOSED</p>;

return (
<footer className='footer'>
{isOpen ? (
<Order
closeHour={closeHour}
openHour={openHour}
/>
) : (
<p>
We're happy to welcome you between {openHour}:00 and {closeHour}:00.
</p>
)}
</footer>
);

// return React.createElement("footer", null, "We're currently open!");
}

function Order({ closeHour, openHour }) {
return (
<div className="order">
<p>
We're open from {openHour}:00 to {closeHour}:00. Come visit us or order
online.
</p>
<button className="btn">Order</button>
</div>
);
return (
<div className='order'>
<p>
We're open from {openHour}:00 to {closeHour}:00. Come visit us or order
online.
</p>
<button className='btn'>Order</button>
</div>
);
}

// React v18
const root = ReactDOM.createRoot(document.getElementById("root"));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>
);

// React before 18
Expand Down
23 changes: 23 additions & 0 deletions 03-pizza-menu/pizza-menu-started/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
Loading