rocketacademy · phyllispp · Dec 5, 2023 · Dec 5, 2023 · Dec 5, 2023 · Dec 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,6 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
 dist-ssr
 *.local
 

diff --git a/dist/assets/index-49b58133.js b/dist/assets/index-49b58133.js
diff --git a/dist/assets/index-5e0a2b77.css b/dist/assets/index-5e0a2b77.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-49b58133.js"></script>
+    <link rel="stylesheet" href="/assets/index-5e0a2b77.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/dist/logo.png b/dist/logo.png
diff --git a/package.json b/package.json
@@ -1,4 +1,5 @@
 {
+  "homepage": "https://phyllispp.github.io/project1-3.2/",
   "name": "project1-3.2",
   "private": true,
   "version": "0.0.0",

diff --git a/photos/Crown Sapphire Ring.jpg b/photos/Crown Sapphire Ring.jpg
diff --git a/photos/Diamonds Cluster Ruby Ring.jpg b/photos/Diamonds Cluster Ruby Ring.jpg
diff --git a/photos/Gold Diamond Bracelet.jpg b/photos/Gold Diamond Bracelet.jpg
diff --git a/photos/Heart Ruby Ring.jpg b/photos/Heart Ruby Ring.jpg
diff --git a/photos/Pearl and Diamond Bubbles Earrings.jpg b/photos/Pearl and Diamond Bubbles Earrings.jpg
diff --git a/photos/Pearl and Diamond Drop Earrings.jpg b/photos/Pearl and Diamond Drop Earrings.jpg
diff --git a/photos/Round Sapphire Ring.jpg b/photos/Round Sapphire Ring.jpg
diff --git a/photos/Sapphire Earrings.jpg b/photos/Sapphire Earrings.jpg
diff --git a/photos/Silver Diamond Bracelet.jpg b/photos/Silver Diamond Bracelet.jpg
diff --git a/photos/Square Sapphire Ring.jpg b/photos/Square Sapphire Ring.jpg
diff --git a/photos/Twisted Gold Diamond Bracelet.jpg b/photos/Twisted Gold Diamond Bracelet.jpg
diff --git a/photos/landingpageimage1.jpg b/photos/landingpageimage1.jpg
diff --git a/photos/landingpageimage2.jpg b/photos/landingpageimage2.jpg
diff --git a/photos/landingpageimage3.jpg b/photos/landingpageimage3.jpg
diff --git a/photos/shopping cart.png b/photos/shopping cart.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,17 +1,34 @@
-import logo from "/logo.png";
 import "./App.css";
+import { useState } from "react";
+import LandingPage from "./LandingPage.jsx";
+import ShoppingCart from "./Shoppingcart.jsx";
 
 function App() {
+  //for switching pages between landingpage and shoppingcart
+  const [showShoppingCart, setShowShoppingCart] = useState(false);
+  const goToShoppingCart = () => {
+    setShowShoppingCart(true);
+  };
+
+  //for adding jewelries into the shopping cart
+  const [shoppingCart, setshoppingCart] = useState([]);
+  const handleAddToCart = (item) => {
+    item.price = parseFloat(item.price.replace(/,/g, ""));
+    setshoppingCart([...shoppingCart, item]);
+  };
+
   return (
     <>
       <div>
-        <img src={logo} className="App-logo" alt="logo" />
-      </div>
-      <h1>Project 1</h1>
-      <div className="card">
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
+        {showShoppingCart ? (
+          <ShoppingCart shoppingCart={shoppingCart} />
+        ) : (
+          <LandingPage
+            goToShoppingCart={goToShoppingCart}
+            onAddToCart={handleAddToCart}
+          />
+        )}
+        {/* <JewelryItem onAddToCart={handleAddToCart} /> */}
       </div>
     </>
   );

diff --git a/src/JewelryData.js b/src/JewelryData.js
@@ -0,0 +1,83 @@
+//best sellers, bracelets, rings, earrings
+
+const jewelryItems = [
+  {
+    id: 1,
+    name: "Silver Diamond Bracelet",
+    categories: ["Bracelets"],
+    price: "9,650",
+    picture: "./photos/Silver Diamond Bracelet.jpg",
+  },
+  {
+    id: 2,
+    name: "Gold Diamond Bracelet",
+    categories: ["Bracelets"],
+    price: "12,500",
+    picture: "./photos/Gold Diamond Bracelet.jpg",
+  },
+  {
+    id: 3,
+    name: "Round Sapphire Ring",
+    categories: ["Rings"],
+    price: "20,000",
+    picture: "./photos/Round Sapphire Ring.jpg",
+  },
+  {
+    id: 4,
+    name: "Square Sapphire Ring",
+    categories: ["Rings"],
+    price: "15,000",
+    picture: "./photos/Square Sapphire Ring.jpg",
+  },
+  {
+    id: 5,
+    name: "Crown Sapphire Ring",
+    categories: ["bestSellers", "Rings"],
+    price: "15,000",
+    picture: "./photos/Crown Sapphire Ring.jpg",
+  },
+  {
+    id: 6,
+    name: "Heart Ruby Ring",
+    categories: ["bestSellers", "Rings"],
+    price: "3,700",
+    picture: "./photos/Heart Ruby Ring.jpg",
+  },
+  {
+    id: 7,
+    name: "Diamonds Cluster Ruby Ring",
+    categories: ["Rings"],
+    price: "20,000",
+    picture: "./photos/Diamonds Cluster Ruby Ring.jpg",
+  },
+  {
+    id: 8,
+    name: "Sapphire Earrings",
+    categories: ["bestSellers", "Earrings"],
+    price: "11,500",
+    picture: "./photos/Sapphire Earrings.jpg",
+  },
+  {
+    id: 9,
+    name: "Pearl and Diamond Bubbles Earrings",
+    categories: ["bestSellers", "Earrings"],
+    price: "3,000",
+    picture: "./photos/Pearl and Diamond Bubbles Earrings.jpg",
+  },
+  {
+    id: 10,
+    name: "Pearl and Diamond Drop Earrings",
+    categories: ["Earrings"],
+    price: "3,150",
+    picture: "./photos/Pearl and Diamond Drop Earrings.jpg",
+  },
+  {
+    id: 11,
+    name: "Twisted Gold Diamond Bracelet",
+    categories: ["Bracelets"],
+    price: "12,500",
+    picture: "./photos/Twisted Gold Diamond Bracelet.jpg",
+  },
+];
+
+export default jewelryItems;
diff --git a/src/JewelryItems.css b/src/JewelryItems.css
@@ -0,0 +1,26 @@
+.jewelry_item {
+  width: calc(25% - 20px);
+  margin-bottom: 20px;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .jewelry_item {
+    width: calc(50% - 20px);
+  }
+}
+
+.jewelry_item img {
+  max-width: 100%;
+  height: auto;
+}
+
+.jewelry_item p {
+  margin: 5px 0;
+  font-size: 14px;
+  font-family: Georgia, "Times New Roman", Times, serif;
+}
+
+.jewelry_item button {
+  padding: 5px 10px;
+  font-size: 12px;
+}
diff --git a/src/JewelryItems.jsx b/src/JewelryItems.jsx
@@ -0,0 +1,24 @@
+// import React from "react";
+import "./JewelryItems.css";
+
+function JewelryItem(props) {
+  return (
+    <div className="jewelry_item">
+      <img src={props.picture} alt={props.name} />
+      <p>{props.name}</p>
+      <p>Price: ${props.price}</p>
+      <button
+        onClick={() =>
+          props.onAddToCart({
+            name: props.name,
+            price: props.price,
+            picture: props.picture,
+          })
+        }
+      >
+        Buy
+      </button>
+    </div>
+  );
+}
+export default JewelryItem;
diff --git a/src/LandingPage.jsx b/src/LandingPage.jsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import JewelryItem from "./JewelryItems";
+import jewelryItems from "./JewelryData";
+import "./landingPage.css";
+
+function LandingPage({ goToShoppingCart, onAddToCart }) {
+  const [selectedCategory, setSelectedCategory] = useState("bestSellers");
+
+  const [showJewelryItems, setShowJewelryItems] = useState(false);
+
+  const filteredJewelryItems = jewelryItems.filter((item) =>
+    item.categories.includes(selectedCategory)
+  );
+
+  const handleCategoryClick = (category) => {
+    setSelectedCategory(category);
+    setShowJewelryItems(true);
+  };
+
+  return (
+    <div className="landing_page">
+      {/* Navbar */}
+      <div className="navBar">
+        <div className="left_buttons">
+          <button onClick={() => handleCategoryClick("bestSellers")}>
+            Best Sellers
+          </button>
+          <button onClick={() => handleCategoryClick("Bracelets")}>
+            Bracelets
+          </button>
+          <button onClick={() => handleCategoryClick("Rings")}>Rings</button>
+          <button onClick={() => handleCategoryClick("Earrings")}>
+            Earrings
+          </button>
+        </div>
+        <div className="right_buttons">
+          <button onClick={goToShoppingCart}>
+            <img src="./photos/shopping cart.png" alt="shopping cart" />
+          </button>
+        </div>
+      </div>
+
+      {/* product section*/}
+      {showJewelryItems ? (
+        <div className="product_section">
+          <div className="title">
+            <h3>
+              {selectedCategory === "bestSellers"
+                ? "Best Sellers"
+                : selectedCategory}
+            </h3>
+            <div className="product_Gallery">
+              {filteredJewelryItems.map((item) => (
+                <JewelryItem
+                  key={item.id}
+                  name={item.name}
+                  price={item.price}
+                  picture={item.picture}
+                  onAddToCart={onAddToCart}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="default_page">
+          <img src="./photos/landingpageimage3.jpg" className="image3" />
+          <div className="text_section">
+            <p>`Shall I compare thee to a gem so rare?</p>
+            <p>Thou art more lovely and more fair.</p>
+            <p>In every jewel, your grace does shine,</p>
+            <p>A symbol of love, forever thine.`</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default LandingPage;
diff --git a/src/Shoppingcart.jsx b/src/Shoppingcart.jsx
@@ -0,0 +1,102 @@
+import { useState } from "react";
+import "./cart.css";
+
+function ShoppingCart({ shoppingCart }) {
+  const [formData, setFormData] = useState({
+    name: "",
+    address: "",
+    cardNumber: "",
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const totalPrice = shoppingCart.reduce(
+    (total, item) => total + Number(item.price),
+    0
+  );
+
+  const handleFormChange = (e) => {
+    const { name, value } = e.target;
+    if (submitted) setSubmitted(false);
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setFormData({
+      name: "",
+      address: "",
+      cardNumber: "",
+    });
+    setSubmitted(true);
+    console.log("Form submitted with data:", formData);
+  };
+
+  return (
+    <div className="shopping_cart">
+      <div className="items_section">
+        <h2>Items</h2>
+        <ul className="ul_style">
+          {shoppingCart.map((item) => (
+            <li key={item.id}>
+              <div className="item_container">
+                <img
+                  src={item.picture}
+                  alt={item.name}
+                  className="item_image"
+                />
+                <div className="item_info">
+                  <p className="item_name">{item.name}</p>
+                  <p className="item_price">${item.price}</p>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <h3 className="total_price">Total Price: ${totalPrice}</h3>
+      </div>
+      <div className="checkout_section">
+        <h2>Checkout</h2>
+        <form onSubmit={handleSubmit}>
+          <label>
+            Name:
+            <input
+              type="text"
+              //This means that when the form containing this input field is submitted,
+              //the data for the user's name will be labeled with the key "name" in the form data.
+              name="name"
+              //This part is responsible for making the input field a "controlled input."
+              //It means that the input field's value is controlled by the formData.name property.
+              //Whatever value is in formData.name will be displayed in the input field. When the user types in the field, the handleFormChange function is called to update formData.name,
+              //and as a result, the value in the input field changes.
+              value={formData.name}
+              onChange={handleFormChange}
+            />
+          </label>
+          <label>
+            Address:
+            <input
+              type="text"
+              name="address"
+              value={formData.address}
+              onChange={handleFormChange}
+            />
+          </label>
+          <label>
+            Card Number:
+            <input
+              type="text"
+              name="cardNumber"
+              value={formData.cardNumber}
+              onChange={handleFormChange}
+            />
+          </label>
+          <button type="submit">Submit</button>
+        </form>
+        {submitted && <div className="success_message">Success!</div>}
+      </div>
+    </div>
+  );
+}
+
+export default ShoppingCart;
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ pnpm-debug.log* @@
     lerna-debug.log*
     node_modules
-    dist
     dist-ssr
     *.local
@@ Expand Down @@