Merge pull request #555 from areebniyas/revamp-ecommerce-project

Revamp E-commerce project
DhanushNehru · Oct 4, 2024 · 0aba584 · 0aba584
2 parents bd5a90a + 4e696dd
commit 0aba584
Show file tree

Hide file tree

Showing 13 changed files with 225 additions and 214 deletions.
diff --git a/E-commerce/Readme.md b/E-commerce/Readme.md
@@ -0,0 +1,71 @@
+# Colorful Socks E-commerce Platform
+
+This is a simple e-commerce platform built using **Vanilla JavaScript**, **HTML**, and **CSS**, featuring a collection of colorful socks. The platform allows users to view available socks, add them to a cart, and proceed to checkout. It showcases a clean layout with a grid system and modern styling.
+
+## Table of Contents
+- [Features](#features)
+- [Technologies Used](#technologies-used)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Folder Structure](#folder-structure)
+
+## Features
+- **Product Display**: View colorful socks in a responsive grid format.
+- **Add to Cart**: Select socks to add to the shopping cart.
+- **Cart Management**: See items in the cart and calculate the total price.
+- **Checkout**: Proceed to checkout, displaying a purchase confirmation.
+- **Responsive Design**: Adjusts to different screen sizes.
+
+## Technologies Used
+- **HTML5**
+- **CSS3** (Grid layout, Shadows, Responsive Design)
+- **Vanilla JavaScript**
+
+## Installation
+
+1. Clone the repository:
+    ```bash
+    git clone https://github.com/DhanushNehru/Ultimate-Web-Development-Resources.git
+    ```
+2. Navigate to the project directory:
+    ```bash
+    cd E-commerce
+    ```
+
+3. Ensure the `index.html`, `styles.css`, and `images` folder are in the same directory.
+
+## Usage
+
+1. Open `index.html` in your browser to launch the e-commerce platform.
+
+Here is a screenshot of the homepage:
+
+![Homepage Screenshot](./assets/screenshot-homepage.png)
+
+2. Browse the available socks, and click **Add to Cart** to include them in your shopping cart.
+
+Here is a screenshot of the cart:
+![Cart Screenshot](./assets/screenshot-cart.png)
+
+3. Click **Checkout** to simulate a purchase.
+
+Here is a screenshot of the checkout functionality:
+![Checkout Screenshot](./assets/screenshot-checkout.png)
+
+## Folder Structure
+
+```bash
+.
+├── images/                  # Contains product images
+│   ├── red-socks.jpg
+│   ├── blue-socks.jpg
+│   └── green-socks.jpg
+├── socks-ecommerce-platform.html  # Main HTML file
+├── socks-ecommerce-styles.css     # Main CSS file
+└── README.md                # Project documentation
+```
+
+## Feel Free to Connect with Me
+
+You can find me on GitHub: [Areeb Niyas](https://github.com/areebniyas)
+
diff --git a/E-commerce/assets/screenshot-cart.png b/E-commerce/assets/screenshot-cart.png
diff --git a/E-commerce/assets/screenshot-checkout.png b/E-commerce/assets/screenshot-checkout.png
diff --git a/E-commerce/assets/screenshot-homepage.png b/E-commerce/assets/screenshot-homepage.png
diff --git a/E-commerce/images/blue-socks.jpg b/E-commerce/images/blue-socks.jpg
diff --git a/E-commerce/images/green-socks.jpg b/E-commerce/images/green-socks.jpg
diff --git a/E-commerce/images/red-socks.jpg b/E-commerce/images/red-socks.jpg
diff --git a/E-commerce/img/cloud.png b/E-commerce/img/cloud.png
diff --git a/E-commerce/index.html b/E-commerce/index.html
diff --git a/E-commerce/script.js b/E-commerce/script.js
diff --git a/E-commerce/socks-ecommerce-platform.html b/E-commerce/socks-ecommerce-platform.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colorful Socks E-commerce Platform</title>
+    <link rel="stylesheet" href="socks-ecommerce-styles.css">
+</head>
+<body>
+    <h1>Colorful Socks E-commerce Platform</h1>
+    <div id="products"></div>
+    <div id="cart"></div>
+    <button id="checkout">Checkout</button>
+
+    <script>
+        const products = [
+            { id: 1, name: 'Red Socks', price: 9.99, image: 'images/red-socks.jpg' },
+            { id: 2, name: 'Blue Socks', price: 9.99, image: 'images/blue-socks.jpg' },
+            { id: 3, name: 'Green Socks', price: 9.99, image: 'images/green-socks.jpg' }
+        ];
+
+        let cart = [];
+
+        function displayProducts() {
+            const productsDiv = document.getElementById('products');
+            productsDiv.innerHTML = products.map(product => `
+                <div class="product">
+                    <img src="${product.image}" alt="${product.name}">
+                    <h3>${product.name}</h3>
+                    <p>Price: $${product.price}</p>
+                    <button onclick="addToCart(${product.id})">Add to Cart</button>
+                </div>
+            `).join('');
+        }
+
+        function addToCart(productId) {
+            const product = products.find(p => p.id === productId);
+            cart.push(product);
+            updateCart();
+        }
+
+        function updateCart() {
+            const cartDiv = document.getElementById('cart');
+            cartDiv.innerHTML = `
+                <h2>Shopping Cart</h2>
+                ${cart.map(item => `<p>${item.name} - $${item.price}</p>`).join('')}
+                <p><strong>Total: $${cart.reduce((sum, item) => sum + item.price, 0).toFixed(2)}</strong></p>
+            `;
+        }
+
+        function checkout() {
+            if (cart.length === 0) {
+                alert('Your cart is empty!');
+            } else {
+                const total = cart.reduce((sum, item) => sum + item.price, 0).toFixed(2);
+                alert(`Thank you for your purchase! Total: $${total}`);
+                cart = [];
+                updateCart();
+            }
+        }
+
+        displayProducts();
+        document.getElementById('checkout').addEventListener('click', checkout);
+    </script>
+</body>
+</html>
diff --git a/E-commerce/socks-ecommerce-styles.css b/E-commerce/socks-ecommerce-styles.css
@@ -0,0 +1,88 @@
+body { 
+    font-family: Arial, sans-serif; 
+    max-width: 1000px; 
+    margin: 0 auto; 
+    padding: 20px; 
+    background-color: #f0f0f0;
+}
+
+h1 { 
+    color: #333; 
+    text-align: center;
+}
+
+/* Grid system for products */
+#products {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
+    gap: 20px; /* Space between grid items */
+}
+
+.product { 
+    border: 1px solid #ddd; 
+    padding: 20px; 
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Increased shadow for more emphasis */
+    text-align: center; /* Center content */
+    transition: transform 0.2s; /* Smooth animation */
+}
+
+.product:hover {
+    transform: translateY(-5px); /* Slight hover effect */
+}
+
+.product img {
+    width: 100%; /* Make image take full width of container */
+    max-width: 200px; /* Constrain the image size */
+    height: 200px; /* Set height to match the width */
+    object-fit: cover; /* Maintain aspect ratio */
+    margin-bottom: 10px;
+}
+
+.product h3 {
+    color: #2c3e50;
+}
+
+.product p {
+    color: #34495e;
+}
+
+.product button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+.product button:hover {
+    background-color: #2980b9;
+}
+
+/* Styling for cart and checkout */
+#cart { 
+    margin-top: 20px; 
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+#checkout {
+    display: block;
+    width: 100%;
+    padding: 15px;
+    background-color: #2ecc71;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 18px;
+    margin-top: 20px;
+}
+
+#checkout:hover {
+    background-color: #27ae60;
+}