Cart Edited

AJFrosty · Jan 18, 2024 · 62956ab · 62956ab
1 parent 063c39c
commit 62956ab
Show file tree

Hide file tree

Showing 5 changed files with 263 additions and 1 deletion.
diff --git a/Marketplace/cart.js b/Marketplace/cart.js
@@ -0,0 +1,34 @@
+// cart.js
+
+// Example cart data structure
+let cart = [];
+
+// Function to add a product to the cart
+function addToCart(productId) {
+    const product = getProductById(productId);
+
+    if (product) {
+        cart.push({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+        });
+
+        // Update the UI or perform any additional actions (e.g., display a success message)
+        console.log(`${product.name} added to cart!`);
+    } else {
+        console.error(`Product with ID ${productId} not found.`);
+    }
+}
+
+// Function to get product details by ID
+function getProductById(productId) {
+    // You may want to replace this with actual product data retrieval logic
+    return products.find(product => product.id === productId);
+}
+
+// Function to display the cart items in the cart.html page
+function displayCart() {
+    // You can update this function to display the cart items in your cart.html page
+    console.log("Cart items:", cart);
+}
diff --git a/Marketplace/cloth.css b/Marketplace/cloth.css
@@ -0,0 +1,150 @@
+/* style.css */
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #000;
+}
+
+#clothing.content-section {
+    margin-top: 500px;
+}
+
+#page-container {
+    padding-top: 100px;
+    background-color: #fff; 
+}
+
+section {
+    margin: 20px auto;
+    text-align: center;
+}
+
+h2 {
+    color: #ffffff;
+    font-size: 20px;
+}
+
+.business-container {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+}
+
+.business {
+    text-align: center;
+    margin: 20px;
+    padding: 80px;
+    border: 2px solid #333;
+    transition: border-color 0.3s;
+}
+
+.business:hover {
+    border-color: #eb7aff;
+}
+
+.business img {
+    width: 250px;
+    height: 250px;
+}
+
+nav {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 10%;
+}
+
+nav .menu-img {
+    width: 25px;
+    margin-top: 20px;
+    margin-left: -105px;
+    cursor: pointer;
+}
+
+nav .logo {
+    position: relative;
+    width: 180px;
+    cursor: pointer;
+}
+
+nav .cart img {
+    width: 50px;
+    height: 50px;
+}
+
+nav ul {
+    margin-top: 20px;
+    flex: 1;
+    text-align: right;
+    display: flex;
+    align-items: center;
+}
+
+nav ul li {
+    display: inline-block;
+    list-style: none;
+    font-weight: 600;
+    margin-right: 13px;
+    font-variant: small-caps;
+    position: relative;
+    cursor: pointer;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: #fff;
+}
+
+li a:hover {
+    color: #4f46e5;
+}
+
+nav ul li input {
+    width: 300px;
+}
+
+a {
+    color: #5995fd;
+}
+
+/* Additional styles for the clothing products */
+#product-slider {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+.slider-item {
+    text-align: center;
+    margin: 20px;
+    max-width: 250px;
+}
+
+.slider-item img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+    border: 1px solid #ddd;
+}
+
+.product-info {
+    padding: 10px;
+}
+
+.add-to-cart {
+    background-color: #4f46e5;
+    color: #fff;
+    border: none;
+    padding: 8px 15px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background-color 0.3s;
+}
+
+.add-to-cart:hover {
+    background-color: #3d358c;
+}
diff --git a/Marketplace/clothing.html b/Marketplace/clothing.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Clothing Store</title>
+    <link rel="stylesheet" href="cloth.css">
+    <link rel="icon" href="https://yt3.ggpht.com/a/AGF-l78km1YyNXmF0r3-0CycCA0HLA_i6zYn_8NZEg=s900-c-k-c0xffffffff-no-rj-mo" type="image/gif" sizes="16x16">
+    <script src="https://kit.fontawesome.com/4a3b1f73a2.js"></script>
+    <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav>
+        <a href="index.html"><img src="../Literacy/images/logo.png" class="logo"></a>
+        <ul>
+            <li>
+                <a href="./cart.html" class="cart">
+                    <img src="img/cart.png" alt="Cart">
+                </a>
+            </li>
+            <li><input type="text" id="input" name="searchBox" placeholder="Search"></li>
+            <li><a href="../Marketplace/index.html">Marketplace</a></li>
+            <li><a href="../Literacy/FL.html">Financial Literacy</a></li>
+            <li><a href="https://www.khanacademy.org/college-careers-more/financial-literacy/xa6995ea67a8e9fdd:welcome-to-financial-literacy"
+                    title="Check out khanacademy's financial literacy Course!">Course</a></li>
+            <li><a href="../Budget/index.html">Budget</a></li>
+            <li><a href="./cart.html">My Cart</a></li>
+            <li><a href="../SignIn/Login/index.html" title="LogOut">LogOut</a></li>
+        </ul>
+    </nav>
+
+    <div class="slider-container" id="product-slider">
+        <!-- Product items will be dynamically added here -->
+    </div>
+
+    <script src="cart.js"></script>
+    <script src="store.js"></script>
+</body>
+</html>
diff --git a/Marketplace/script.js b/Marketplace/script.js
@@ -1,5 +1,5 @@
 const businesses = [
-    { category: "clothing", name: "Marty's Clothing Store", logo: "img/clothing1.png", link: "#" },
+    { category: "clothing", name: "Marty's Clothing Store", logo: "img/clothing1.png", link: "clothing.html" },
     { category: "clothing", name: "Fashion Shop", logo: "img/clothing2.png", link: "#" },
     { category: "clothing", name: "Cassia's Cloth Store", logo: "img/clothing3.png", link: "#" },
     { category: "technology", name: "Tech Shop", logo: "img/tech1.png", link: "#" },

diff --git a/Marketplace/store.js b/Marketplace/store.js
@@ -0,0 +1,38 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const products = [
+        { id: 1, name: "Princess Lip Tint", brand: "Beauty World", price: 19.99, image: "prod/product1.jpg" },
+        { id: 2, name: "Healthy Lettuce", brand: "Ripe and Ready", price: 7.99, image: "prod/product2.png" },
+        { id: 3, name: "Smart Watch", brand: "Infinity Tech", price: 59.50, image: "prod/product3.png" },
+        { id: 4, name: "Black Bodycon and Gather Dress", brand: "Cassia's Clothing Store", price: 35.00, image: "prod/product4.png" },
+        // Add more products as needed
+    ];
+
+    const sliderContainer = document.getElementById("product-slider");
+
+    products.forEach(product => {
+        const productItem = document.createElement("div");
+        productItem.classList.add("slider-item");
+        productItem.innerHTML = `
+            <img src="${product.image}" alt="${product.name}">
+            <div class="product-info">
+                <h3>${product.name}</h3>
+                <p>${product.brand}</p>
+                <p>$${product.price.toFixed(2)}</p>
+                <button class="add-to-cart" data-product-id="${product.id}">Add to Cart</button>
+            </div>
+        `;
+        sliderContainer.appendChild(productItem);
+    });
+
+    // Add event listener for the "Add to Cart" buttons
+    const addToCartButtons = document.querySelectorAll(".add-to-cart");
+    addToCartButtons.forEach(button => {
+        button.addEventListener("click", addToCart);
+    });
+
+    function addToCart(event) {
+        const productId = event.target.getAttribute("data-product-id");
+        // Add your logic to add the product to the cart
+        console.log(`Product added to cart - ID: ${productId}`);
+    }
+});