css upgrade

Author: btholt

lessons/03-tools/E-vite.md

@@ -69,6 +69,9 @@ Now let's set up our scripts to start Vite. In package.json, put:
 
 Be sure to also add `"type: module"` to your package.json. Vite has deprecated support for Common.js and now requires you to use ESM style modules.
 
+> Note: you will get a warning from Vite like `Files in the public directory are served at the root path.
+Instead of /public/style.css, use /style.css.` – ignore this, we'll fix it in a bit.
+
 `dev` will start the development server, typically on [http://localhost:5173/](). `build` will prepare static files to be deployed (to somewhere like GitHub Pages, Vercel, Netlify, AWS S3, etc.) `preview` lets you preview your production build locally.
 
 > Do note that we've changed domains here. By default Vite uses localhost:5173. Fun fact, 5173 sort of spells VITE if you make the 5 its Roman Numeral version, V.

lessons/04-core-react-concepts/A-jsx.md

@@ -14,7 +14,7 @@ Make a new file called Pizza.jsx.
 ```javascript
 const Pizza = (props) => {
   return (
-    <div>
+    <div className="pizza">
       <h1>{props.name}</h1>
       <p>{props.description}</p>
     </div>

lessons/04-core-react-concepts/B-hooks.md

@@ -9,50 +9,65 @@ import Pizza from "./Pizza";
 
 export default function Order() {
   const pizzaType = "pepperoni";
-  const pizzaSize = "medium";
+  const pizzaSize = "M";
   return (
     <div className="order">
+      <h2>Create Order</h2>
       <form>
         <div>
-          <label htmlFor="pizza-type">Pizza Type</label>
-          <select name="pizza-type" value={pizzaType}>
-            <option value="pepperoni">The Pepperoni Pizza</option>
-            <option value="hawaiian">The Hawaiian Pizza</option>
-            <option value="big_meat">The Big Meat Pizza</option>
-          </select>
-        </div>
-        <div>
-          <label htmlFor="pizza-size">Pizza Type</label>
           <div>
-            <input
-              checked={pizzaSize === "small"}
-              type="radio"
-              name="pizza-size"
-              value="small"
-            />
-            <label>Small</label>
-            <input
-              checked={pizzaSize === "medium"}
-              type="radio"
-              name="pizza-size"
-              value="medium"
-            />
-            <label>Medium</label>
-            <input
-              checked={pizzaSize === "large"}
-              type="radio"
-              name="pizza-size"
-              value="large"
-            />
-            <label>Large</label>
+            <label htmlFor="pizza-type">Pizza Type</label>
+            <select name="pizza-type" value={pizzaType}>
+              <option value="pepperoni">The Pepperoni Pizza</option>
+              <option value="hawaiian">The Hawaiian Pizza</option>
+              <option value="big_meat">The Big Meat Pizza</option>
+            </select>
           </div>
+          <div>
+            <label htmlFor="pizza-size">Pizza Type</label>
+            <div>
+              <span>
+                <input
+                  checked={pizzaSize === "S"}
+                  type="radio"
+                  name="pizza-size"
+                  value="S"
+                  id="pizza-s"
+                />
+                <label htmlFor="pizza-s">Small</label>
+              </span>
+              <span>
+                <input
+                  checked={pizzaSize === "M"}
+                  type="radio"
+                  name="pizza-size"
+                  value="M"
+                  id="pizza-m"
+                />
+                <label htmlFor="pizza-m">Medium</label>
+              </span>
+              <span>
+                <input
+                  checked={pizzaSize === "L"}
+                  type="radio"
+                  name="pizza-size"
+                  value="L"
+                  id="pizza-l"
+                />
+                <label htmlFor="pizza-l">Large</label>
+              </span>
+            </div>
+          </div>
+          <button type="submit">Add to Cart</button>
+        </div>
+        <div className="order-pizza">
+          <Pizza
+            name="Pepperoni"
+            description="Mozzarella Cheese, Pepperoni"
+            image="/public/pizzas/pepperoni.webp"
+          />
+          <p>$13.37</p>
         </div>
-        <Pizza
-          name="Pepperoni"
-          description="Mozzarella Cheese, Pepperoni"
-          image="/public/pizzas/pepperoni.webp"
-        />
-        <button type="submit">Add to Cart</button>
       </form>
     </div>
   );

lessons/04-core-react-concepts/C-effects.md

@@ -37,7 +37,7 @@ useEffect(() => {
 }, []);
 
 async function fetchPizzaTypes() {
-  await new Promise((resolve) => setTimeout(resolve, 3000));
+  await new Promise((resolve) => setTimeout(resolve, 3000)); // remove this later, just to show you the loading state
 
   const pizzasRes = await fetch("/api/pizzas");
   const pizzasJson = await pizzasRes.json();

lessons/04-core-react-concepts/E-custom-hooks.md

@@ -21,20 +21,22 @@ const PizzaOfTheDay = () => {
   }
 
   return (
-    <div>
-      <div className="pizza-of-the-day-info">
-        <h2>Pizza of the Day</h2>
-        <h3>{pizzaOfTheDay.name}</h3>
-        <p>{pizzaOfTheDay.description}</p>
+    <div className="pizza-of-the-day">
+      <h2>Pizza of the Day</h2>
+      <div>
+        <div className="pizza-of-the-day-info">
+          <h3>{pizzaOfTheDay.name}</h3>
+          <p>{pizzaOfTheDay.description}</p>
+          <p className="pizza-of-the-day-price">
+            From: <span>{intl.format(pizzaOfTheDay.sizes.S)}</span>
+          </p>
+        </div>
+        <img
+          className="pizza-of-the-day-image"
+          src={pizzaOfTheDay.image}
+          alt={pizzaOfTheDay.name}
+        />
       </div>
-      <img
-        className="pizza-of-the-day-image"
-        src={pizzaOfTheDay.image}
-        alt={pizzaOfTheDay.name}
-      />
-      <p className="pizza-of-the-day-price">
-        From: <span>{intl.format(pizzaOfTheDay.sizes.S)}</span>
-      </p>
     </div>
   );
 };