Spaces:

KingNish
/

test-space

Running

App Files Files Community

KingNish

smolSWE commited on 23 days ago

Commit

5cc830e

verified ·

1 Parent(s): 20c9b10

Implemented product details, shopping cart, and checkout functionality (#20)

Browse files

- Implemented product details, shopping cart, and checkout functionality (9a0c1bc34c6da36cfe62a70dbb4bca1b8cb7509a)

Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

Files changed (8) hide show

cart.html +39 -0
checkout.html +53 -0
confirmation.html +30 -0
index.html +22 -11
product.html +39 -0
script.js +146 -57
style.css +8 -76
tailwind.config.js +15 -0

cart.html ADDED Viewed

	@@ -0,0 +1,39 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shopping Cart</title>
+    <link href="style.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100">
+    <header class="bg-amazon-blue p-4 text-white">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center"><h1 class="text-2xl font-bold">Amazon Dummy</h1><a href="cart.html" class="text-white">Cart</a></div>
+            <a href="index.html" class="text-sm">Back to Home</a>
+        </div>
+    </header>
+    <main class="container mx-auto mt-8">
+        <h2 class="text-2xl font-semibold mb-4">Shopping Cart</h2>
+        <div id="cart-items">
+            <!-- Cart items will be dynamically added here using JavaScript -->
+        </div>
+        <div class="mt-6">
+            <h3 class="text-lg font-semibold">Total: <span id="cart-total">0.00</span></h3>
+            <a href="checkout.html"><button class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">Checkout</button></a>
+                Checkout
+            </button>
+        </div>
+    </main>
+    <footer class="bg-gray-200 p-4 mt-8 text-center">
+        <p>&copy; 2024 Amazon Dummy</p>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>

checkout.html ADDED Viewed

	@@ -0,0 +1,53 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Checkout</title>
+    <link href="style.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100">
+    <header class="bg-amazon-blue p-4 text-white">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center">
+                <h1 class="text-2xl font-bold">Amazon Dummy</h1>
+                <a href="cart.html" class="text-white">Cart</a>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto mt-8">
+        <h2 class="text-2xl font-semibold mb-4">Checkout</h2>
+        <form id="checkout-form">
+            <div class="mb-4">
+                <label for="shipping-address" class="block text-gray-700 text-sm font-bold mb-2">Shipping Address:</label>
+                <textarea id="shipping-address" name="shipping-address" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
+            </div>
+            <div class="mb-4">
+                <label for="payment-info" class="block text-gray-700 text-sm font-bold mb-2">Payment Information:</label>
+                <input type="text" id="payment-info" name="payment-info" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+            </div>
+            <button type="submit" class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">
+                Place Order
+            </button>
+        </form>
+    </main>
+    <footer class="bg-gray-200 p-4 mt-8 text-center">
+        <p>&copy; 2024 Amazon Dummy</p>
+    </footer>
+</body>
+</html>
+<script>
+    document.getElementById('checkout-form').addEventListener('submit', function(event) {
+        event.preventDefault(); // Prevent the default form submission
+        // Redirect to the confirmation page
+        window.location.href = 'confirmation.html';
+    });
+</script>

confirmation.html ADDED Viewed

	@@ -0,0 +1,30 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Order Confirmation</title>
+    <link href="style.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100">
+    <header class="bg-amazon-blue p-4 text-white">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center">
+                <h1 class="text-2xl font-bold">Amazon Dummy</h1>
+                <a href="cart.html" class="text-white">Cart</a>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto mt-8">
+        <h2 class="text-2xl font-semibold mb-4">Order Confirmation</h2>
+        <p class="text-gray-700">Thank you for your order! Your order has been placed successfully.</p>
+    </main>
+    <footer class="bg-gray-200 p-4 mt-8 text-center">
+        <p>&copy; 2024 Amazon Dummy</p>
+    </footer>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,17 +1,28 @@
 <!DOCTYPE html>
-<html>
 <head>
-  <title>Google Clone</title>
-  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <div class="logo-container"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo"></div><div class="search-container">
-    <input type="text" id="search-input" placeholder="Search Google">
-    <div id="suggestions"></div>
-  </div>
-  <div id="results-container">
-  </div>
-  <script src="script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amazon Dummy</title>
+    <link href="style.css" rel="stylesheet">
 </head>
 <body>
+    <header class="bg-amazon-blue">
+        <div class="container mx-auto py-2">
+            <div class="flex items-center justify-between">
+                <div class="text-white font-bold text-2xl">Amazon Dummy</div>
+                <div class="flex items-center">
+                    <input type="text" class="px-4 py-2 rounded-l-md focus:outline-none" placeholder="Search">
+                    <button class="bg-amazon-orange hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded-r-md">Search</button>
+                </div>
+            </div>
+        </div>
+    </header>
+    <main class="container mx-auto mt-4">
+        <section id="products" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            <!-- Products will be dynamically added here -->
+        </section>
+    </main>
+    <script src="script.js"></script>
 </body>
 </html>

product.html ADDED Viewed

	@@ -0,0 +1,39 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Product Details</title>
+    <link href="style.css" rel="stylesheet">
+</head>
+<body class="bg-gray-100">
+    <header class="bg-amazon-blue p-4 text-white">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center"><h1 class="text-2xl font-bold">Amazon Dummy</h1><a href="cart.html" class="text-white">Cart</a></div>
+            <a href="index.html" class="text-sm">Back to Home</a>
+        </div>
+    </header>
+    <main class="container mx-auto mt-8">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="md:col-span-1">
+                <img src="https://picsum.photos/400/300" alt="Product Image" class="w-full rounded-lg shadow-md">
+            </div>
+            <div class="md:col-span-1">
+                <h2 class="text-2xl font-semibold mb-4">Product Name</h2>
+                <p class="text-gray-700 mb-6">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+                <button id="add-to-cart-btn" class="bg-amazon-yellow hover:bg-yellow-500 text-black font-bold py-2 px-4 rounded">
+                    Add to Cart
+                </button>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-gray-200 p-4 mt-8 text-center">
+        <p>&copy; 2024 Amazon Dummy</p>
+    </footer>
+</body>
+</html>

script.js CHANGED Viewed

@@ -1,62 +1,151 @@
-const searchInput = document.getElementById("search-input");
-const suggestionsDiv = document.getElementById("suggestions");
-const resultsContainer = document.getElementById("results-container");
-const dummySuggestions = [
-  "what is javascript",
-  "how to make a website",
-  "best restaurants near me",
-  "weather today",
-  "current news"
-];
-searchInput.addEventListener("input", function() {
-  const inputValue = searchInput.value.toLowerCase();
-  const filteredSuggestions = dummySuggestions.filter(suggestion =>
-    suggestion.toLowerCase().startsWith(inputValue)
-  );
-  displaySuggestions(filteredSuggestions);
-});
-function displaySuggestions(suggestions) {
-  suggestionsDiv.innerHTML = "";
-  if (suggestions.length > 0 && searchInput.value) {
-    suggestions.forEach(suggestion => {
-      const suggestionElement = document.createElement("div");
-      suggestionElement.textContent = suggestion;
-      suggestionElement.addEventListener("click", function() {
-        searchInput.value = suggestion;
-        suggestionsDiv.style.display = "none";
-        displayResults(suggestion);
-      });
-      suggestionsDiv.appendChild(suggestionElement);
     });
-    suggestionsDiv.style.display = "block";
-  } else {
-    suggestionsDiv.style.display = "none";
-  }
 }
-searchInput.addEventListener("keydown", function(event) {
-  if (event.key === "Enter") {
-    const inputValue = searchInput.value;
-    displayResults(inputValue);
-    suggestionsDiv.style.display = "none";
-  }
-});
-function displayResults(query) {
-  resultsContainer.innerHTML = "";
-  const dummyResults = [
-    `Result 1 for ${query}`,
-    `Result 2 for ${query}`,
-    `Result 3 for ${query}`
-  ];
-  dummyResults.forEach(result => {
-    const resultElement = document.createElement("div");
-    resultElement.textContent = result;
-    resultsContainer.appendChild(resultElement);
-  });
-}

+// script.js
+// Function to add a product to the cart
+function addToCart(productName, productPrice) {
+    let cart = JSON.parse(localStorage.getItem('cart')) || [];
+    let existingProduct = cart.find(item => item.name === productName);
+    if (existingProduct) {
+        existingProduct.quantity += 1;
+    } else {
+        cart.push({
+            name: productName,
+            price: productPrice,
+            quantity: 1
+        });
+    }
+    localStorage.setItem('cart', JSON.stringify(cart));
+    updateCartTotal();
+}
+// Function to display cart items on cart.html
+function displayCartItems() {
+    let cart = JSON.parse(localStorage.getItem('cart')) || [];
+    let cartItemsContainer = document.getElementById('cart-items');
+    let cartTotalElement = document.getElementById('cart-total');
+    if (cartItemsContainer) {
+        cartItemsContainer.innerHTML = ''; // Clear existing items
+        if (cart.length === 0) {
+            cartItemsContainer.innerHTML = '<p>Your cart is empty.</p>';
+            cartTotalElement.textContent = '0.00';
+            return;
+        }
+        let total = 0;
+        cart.forEach(item => {
+            let itemElement = document.createElement('div');
+            itemElement.classList.add('cart-item', 'mb-4', 'p-4', 'border', 'border-gray-300', 'rounded-lg');
+            itemElement.innerHTML = `
+                <h4 class="text-lg font-semibold">${item.name}</h4>
+                <p>Price: $${item.price.toFixed(2)}</p>
+                <div class="flex items-center">
+                    <label for="quantity-${item.name}" class="mr-2">Quantity:</label>
+                    <input type="number" id="quantity-${item.name}" name="quantity-${item.name}" value="${item.quantity}" min="1" class="w-20 px-2 py-1 border border-gray-300 rounded">
+                    <button class="remove-item-btn bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded ml-2" data-product="${item.name}">Remove</button>
+                </div>
+            `;
+            cartItemsContainer.appendChild(itemElement);
+            total += item.price * item.quantity;
+        });
+        cartTotalElement.textContent = total.toFixed(2);
+        // Add event listeners to quantity inputs and remove buttons
+        let quantityInputs = cartItemsContainer.querySelectorAll('input[type="number"]');
+        quantityInputs.forEach(input => {
+            input.addEventListener('change', updateQuantity);
+        });
+        let removeButtons = cartItemsContainer.querySelectorAll('.remove-item-btn');
+        removeButtons.forEach(button => {
+            button.addEventListener('click', removeItem);
+        });
+    }
+}
+// Function to update cart item quantity
+function updateQuantity(event) {
+    let productName = event.target.id.replace('quantity-', '');
+    let newQuantity = parseInt(event.target.value);
+    if (newQuantity > 0) {
+        let cart = JSON.parse(localStorage.getItem('cart')) || [];
+        let itemToUpdate = cart.find(item => item.name === productName);
+        if (itemToUpdate) {
+            itemToUpdate.quantity = newQuantity;
+            localStorage.setItem('cart', JSON.stringify(cart));
+            updateCartTotal();
+            displayCartItems(); // Re-render the cart items to reflect the updated quantity
+        }
+    }
+}
+// Function to remove item from cart
+function removeItem(event) {
+    let productName = event.target.dataset.product;
+    let cart = JSON.parse(localStorage.getItem('cart')) || [];
+    let updatedCart = cart.filter(item => item.name !== productName);
+    localStorage.setItem('cart', JSON.stringify(updatedCart));
+    updateCartTotal();
+    displayCartItems(); // Re-render the cart items after removing the item
+}
+// Function to calculate and update the cart total
+function updateCartTotal() {
+    let cart = JSON.parse(localStorage.getItem('cart')) || [];
+    let total = 0;
+    cart.forEach(item => {
+        total += item.price * item.quantity;
     });
+    let cartTotalElement = document.getElementById('cart-total');
+    if (cartTotalElement) {
+        cartTotalElement.textContent = total.toFixed(2);
+    }
 }
+// Add to cart functionality to product.html (example)
+//document.addEventListener('DOMContentLoaded', () => {
+//    const addToCartButton = document.querySelector('#add-to-cart-btn'); // Assuming you have an add to cart button with this ID
+//    if (addToCartButton) {
+//        addToCartButton.addEventListener('click', () => {
+//            const productName = 'Product Name'; // Replace with the actual product name
+//            const productPrice = 20.00; // Replace with the actual product price
+//            addToCart(productName, productPrice);
+//        });
+//    }
+//});
+// Call displayCartItems() when cart.html loads
+if (document.body.id === 'cart-page') {
+    displayCartItems();
+}
+// Update cart total on page load
+document.addEventListener('DOMContentLoaded', updateCartTotal);
+// Add to cart functionality to product.html
+document.addEventListener('DOMContentLoaded', () => {
+    // Set the ID of the body
+    document.body.id = 'product-page';
+    const addToCartButton = document.querySelector('#add-to-cart-btn'); // Assuming you have an add to cart button with this ID
+    if (addToCartButton) {
+        addToCartButton.addEventListener('click', () => {
+            const productName = 'Product Name'; // Replace with the actual product name
+            const productPrice = 20.00; // Replace with the actual product price
+            addToCart(productName, productPrice);
+        });
+    }
+});

style.css CHANGED Viewed

@@ -1,79 +1,11 @@
-body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 100vh; /* Use min-height for better centering */
 }
-.logo-container {
-  margin-top: 100px; /* Adjust as needed */
-  margin-bottom: 20px; /* Space between logo and search bar */
-  text-align: center;
-}
-.logo-container img {
-    width: auto; /* Maintain aspect ratio */
-    height: 92px; /* Google logo height */
-}
-.search-container {
-  /* margin-top: 100px; */ /* Removed, logo container handles top margin */
-  position: relative;
-}
-#search-input {
-  width: 580px; /* Increased width slightly */
-  padding: 13px 20px; /* Adjusted padding */
-  font-size: 16px;
-  border: 1px solid #dfe1e5; /* Softer border color */
-  border-radius: 24px;
-  outline: none;
-  box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Add a subtle shadow */
-  transition: box-shadow 0.3s ease-in-out; /* Smooth transition */
-}
-#search-input:focus {
-    border-color: #adadad; /* Slightly darker border on focus */
-    box-shadow: 0 1px 6px rgb(32 33 36 / 28%); /* Keep shadow on focus */
-}
-#suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: calc(580px + 40px); /* Match input width + padding */
-  background-color: #fff;
-  border: 1px solid #dfe1e5;
-  border-top: none;
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 4px 6px rgb(32 33 36 / 10%); /* Softer shadow */
-  display: none;
-  z-index: 1;
-}
-#suggestions div {
-  padding: 10px 16px; /* Adjusted padding */
-  cursor: pointer;
-  font-size: 14px;
-}
-#suggestions div:hover {
-  background-color: #f0f0f0;
-}
-#results-container {
-  margin-top: 40px; /* Increased margin for results */
-  width: 600px; /* Adjusted width */
-}
-#results-container div {
-    margin-bottom: 15px; /* Space between results */
-    padding: 10px 0;
-    border-bottom: 1px solid #eee; /* Separator line */
-    font-size: 14px;
-}

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.bg-amazon-blue {
+    background-color: #232F3E;
 }
+.bg-amazon-orange {
+    background-color: #FF9900;
+}

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,15 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./*.{html,js}"],
+  theme: {
+    extend: {
+      colors: {
+        amazon: {
+          blue: '#232F3E',
+          orange: '#FF9900',
+        }
+      }
+    },
+  },
+  plugins: [],
+}