Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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