Discover Fashion For Every Generation
Men's Clothing
Women's Clothing
Teenage Fashion
Footwear
Old Men's Clothing
Old Women's Clothing
Hair & Haircare
📷 Use Camera
🖼️ Upload From Gallery
Graphic Tee
Stylish Sneakers
Teen Jacket
Trendy Hair Clips
TrendLink
<title>E-Commerce Store</title>
Home
Products
Cart (0)
© 2025 My Store. All rights reserved.
<script src="script.js"></script> <title>Cart - My Online Store</title> Home CartNo items in cart.
<section id="checkout">
<button>Proceed to Checkout</button>
</section>
© 2025 My Store. All rights reserved.
<title>Product Details</title> Home CartPrice: ₹999
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Add to Cart© 2025 My Store. All rights reserved.
<title>Login - My Store</title> Home Register Email:Password:
Login
© 2025 My Store. All rights reserved.
<title>Register - My Store</title> Home Login Full Name:Email:
Password:
Register
© 2025 My Store. All rights reserved.
<title>Checkout - My Store</title> Home Cart Full Name:Address:
Payment Method:
Cash on Delivery Credit/Debit Card UPI
Place Order
© 2025 My Store. All rights reserved.
<title>Admin Panel - My Store</title> Home Admin PanelPrice:
Description:
<textarea id="product-description" required></textarea>
Add Product
<section>
<h2>All Products</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Price (₹)</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="product-table">
<!-- Products will appear here -->
</tbody>
</table>
</section>
© 2025 My Store. All rights reserved.
<script> const form = document.getElementById("add-product-form"); const table = document.getElementById("product-table"); let adminProducts = []; form.addEventListener("submit", (e) => { e.preventDefault(); const name = document.getElementById("product-name").value; const price = document.getElementById("product-price").value; const desc = document.getElementById("product-description").value; const newProduct = { name, price, desc }; adminProducts.push(newProduct); renderTable(); form.reset(); }); function renderTable() { table.innerHTML = ""; adminProducts.forEach((product, index) => { table.innerHTML += ` ${product.name} ${product.price} ${product.desc} < <title>My Online Store</title> Home Cart (0) Login© 2025 My Store. All rights reserved.
<script src="script.js"></script> const products = [ { id: 1, name: "T-Shirt", price: 499, category: "clothing" }, { id: 2, name: "Sneakers", price: 1999, category: "shoes" }, { id: 3, name: "Jeans", price: 1299, category: "clothing" }, { id: 4, name: "Cap", price: 299, category: "accessories" }, ];let cart = [];
function renderProducts(filtered = products) {
const container = document.getElementById("product-list");
container.innerHTML = "";
filtered.forEach(product => {
container.innerHTML += <div class="product"> <h3>${product.name}</h3> <p>₹${product.price}</p> <p>Category: ${product.category}</p> <button onclick="addToCart(${product.id})">Add to Cart</button> </div>;
});
}
function addToCart(productId) { cart.push(productId); document.getElementById("cart-count").innerText = cart.length; }
document.getElementById("search-input").addEventListener("input", () => { filterAndSearch(); });
document.getElementById("category-filter").addEventListener("change", () => { filterAndSearch(); });
function filterAndSearch() { const searchText = document.getElementById("search-input").value.toLowerCase(); const category = document.getElementById("category-filter").value;
const filtered = products.filter(product => { const matchesSearch = product.name.toLowerCase().includes(searchText); const matchesCategory = category === "all" || product.category === category; return matchesSearch && matchesCategory; });
renderProducts(filtered); }
renderProducts();
<title>My Online Store</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; padding: 0 15px; } header { background-color: #222; color: #fff; padding: 15px 0; text-align: center; } nav { margin-top: 10px; } nav a { color: #fff; margin: 0 10px; text-decoration: none; } nav a:hover { text-decoration: underline; } main { max-width: 1200px; margin: 20px auto; } input[type="text"], select { padding: 8px; margin: 10px 5px; width: 200px; } #product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .product { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; } .product h3 { margin-bottom: 10px; } .product button { background-color: #28a745; color: white; border: none; padding: 10px 15px; cursor: pointer; margin-top: 10px; border-radius: 5px; } .product button:hover { background-color: #218838; } footer { text-align: center; padding: 15px; background-color: #222; color: white; margin-top: 40px; } @media screen and (max-width: 600px) { #product-list { grid-template-columns: 1fr; } input[type="text"], select { width: 100%; margin: 10px 0; } } </style> <title>TrendLink - Add Product</title> <style> body { font-family: Arial; padding: 20px; background: #f4f4f4; } form { background: white; padding: 20px; max-width: 400px; margin: auto; border-radius: 10px; } input, textarea { width: 100%; margin-bottom: 10px; padding: 8px; } button { background: #000; color: white; padding: 10px; border: none; cursor: pointer; } </style> <textarea name="description" placeholder="Product Description" required></textarea> Add Product <script> document.getElementById('productForm').addEventListener('submit', async function(e) { e.preventDefault(); const form = e.target; const data = { name: form.name.value, price: form.price.value, description: form.description.value, image: form.image.value }; const res = await fetch('/api/products', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); if (res.ok) { alert('Product added successfully!'); form.reset(); } else { alert('Failed to add product.'); } }); </script>