diff --git a/Projects/Nocommerce/index.html b/Projects/Nocommerce/index.html new file mode 100644 index 000000000..7a87d2a67 --- /dev/null +++ b/Projects/Nocommerce/index.html @@ -0,0 +1,244 @@ + + + + + + NoCommerce - Simple E-commerce Platform + + + + + + +
+
+
+ +

NoCommerce

+
+ + + +
+ + + +
+
+ + + + + + +
+ + +
+
+

Welcome to NoCommerce

+

The simplest way to shop online

+ +
+
+ + +
+
+

Shop by Category

+
+
+
+ +
+
+

Electronics

+

100+ products

+
+
+
+
+ +
+
+

Clothing

+

200+ products

+
+
+
+
+ +
+
+

Home & Garden

+

150+ products

+
+
+
+
+ +
+
+

Sports

+

80+ products

+
+
+
+
+
+ + +
+
+
+

Featured Products

+ +
+ +
+ +
+
+
+ + +
+
+

Subscribe to our Newsletter

+

Stay updated with our latest products and exclusive offers.

+
+ + +
+
+
+ + + + + +
+
+
+

Your Cart

+ +
+ +
+ +
+ +

Your cart is empty

+
+
+ +
+
+ Subtotal: + $0.00 +
+
+ Total: + $0.00 +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/Projects/Nocommerce/main.js b/Projects/Nocommerce/main.js new file mode 100644 index 000000000..525562ca4 --- /dev/null +++ b/Projects/Nocommerce/main.js @@ -0,0 +1,347 @@ +const products = [ + { + id: 1, + name: "Wireless Headphones", + price: 99.99, + image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8aGVhZHBob25lc3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + category: "Electronics", + rating: 4.5 + }, + { + id: 2, + name: "Smart Watch", + price: 199.99, + image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c21hcnQlMjB3YXRjaHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + category: "Electronics", + rating: 4.2 + }, + { + id: 3, + name: "Running Shoes", + price: 79.99, + image: "https://images.unsplash.com/photo-1460353581641-37baddab0fa2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8c2hvZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60", + category: "Sports", + rating: 4.7 + }, + { + id: 4, + name: "Cotton T-Shirt", + price: 24.99, + image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fHRzaGlydHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + category: "Clothing", + rating: 4.0 + }, + { + id: 5, + name: "Coffee Maker", + price: 59.99, + image: "https://images.unsplash.com/photo-1556911463-12d8df5c611f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29mZmVlJTIwbWFrZXJ8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60", + category: "Home", + rating: 4.3 + }, + { + id: 6, + name: "Backpack", + price: 49.99, + image: "https://images.unsplash.com/photo-1553062407-98eeb64e30d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja3BhY2t8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60", + category: "Accessories", + rating: 4.6 + }, + { + id: 7, + name: "Bluetooth Speaker", + price: 89.99, + image: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8Ymx1ZXRvb3RoJTIwc3BlYWtlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + category: "Electronics", + rating: 4.4 + }, + { + id: 8, + name: "Yoga Mat", + price: 29.99, + image: "https://images.unsplash.com/photo-1576678927484-cc907957088c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8eW9nYSUyMG1hdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + category: "Sports", + rating: 4.1 + } +]; + +// Shopping cart data +let cart = []; + +// DOM elements +const productsContainer = document.getElementById('products-container'); +const cartBtn = document.getElementById('cart-btn'); +const closeCartBtn = document.getElementById('close-cart'); +const cartSidebar = document.getElementById('cart-sidebar'); +const cartOverlay = document.getElementById('cart-overlay'); +const cartItemsContainer = document.getElementById('cart-items'); +const emptyCartMessage = document.getElementById('empty-cart-message'); +const cartCount = document.getElementById('cart-count'); +const cartSubtotal = document.getElementById('cart-subtotal'); +const cartTotal = document.getElementById('cart-total'); +const searchBtn = document.getElementById('search-btn'); +const searchBar = document.getElementById('search-bar'); +const mobileMenuBtn = document.getElementById('mobile-menu-btn'); +const mobileMenu = document.getElementById('mobile-menu'); + +// Render products +function renderProducts() { + productsContainer.innerHTML = ''; + + products.forEach(product => { + const productCard = document.createElement('div'); + productCard.className = 'product-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300'; + productCard.innerHTML = ` +
+ ${product.name} +
+
+
+

${product.name}

+ $${product.price.toFixed(2)} +
+
+ ${renderRatingStars(product.rating)} + ${product.rating} +
+
+ ${product.category} + +
+
+ `; + productsContainer.appendChild(productCard); + }); + + // Add event listeners to "Add to Cart" buttons + document.querySelectorAll('.add-to-cart').forEach(button => { + button.addEventListener('click', (e) => { + const productId = parseInt(e.target.getAttribute('data-id')); + addToCart(productId); + }); + }); +} + +// Render rating stars +function renderRatingStars(rating) { + let stars = ''; + const fullStars = Math.floor(rating); + const hasHalfStar = rating % 1 >= 0.5; + + for (let i = 0; i < fullStars; i++) { + stars += ''; + } + + if (hasHalfStar) { + stars += ''; + } + + const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0); + for (let i = 0; i < emptyStars; i++) { + stars += ''; + } + + return stars; +} + +// Add product to cart +function addToCart(productId) { + const product = products.find(p => p.id === productId); + if (!product) return; + + const existingItem = cart.find(item => item.id === productId); + + if (existingItem) { + existingItem.quantity += 1; + } else { + cart.push({ + ...product, + quantity: 1 + }); + } + + updateCart(); + + // Show notification + const notification = document.createElement('div'); + notification.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center animate-fade-in'; + notification.innerHTML = ` + + ${product.name} added to cart + `; + document.body.appendChild(notification); + + setTimeout(() => { + notification.classList.remove('animate-fade-in'); + notification.classList.add('animate-fade-out'); + setTimeout(() => notification.remove(), 300); + }, 2000); + + // Add animation classes + setTimeout(() => { + notification.classList.add('animate-fade-in'); + }, 10); +} + +// Remove product from cart +function removeFromCart(productId) { + cart = cart.filter(item => item.id !== productId); + updateCart(); +} + +// Update product quantity in cart +function updateQuantity(productId, newQuantity) { + const item = cart.find(item => item.id === productId); + if (item) { + item.quantity = Math.max(1, newQuantity); + updateCart(); + } +} + +// Update cart UI +function updateCart() { + // Update cart count + const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); + cartCount.textContent = totalItems; + + // Update cart items + cartItemsContainer.innerHTML = ''; + + if (cart.length === 0) { + emptyCartMessage.classList.remove('hidden'); + cartSubtotal.textContent = '$0.00'; + cartTotal.textContent = '$0.00'; + return; + } + + emptyCartMessage.classList.add('hidden'); + + let subtotal = 0; + + cart.forEach(item => { + const itemTotal = item.price * item.quantity; + subtotal += itemTotal; + + const cartItem = document.createElement('div'); + cartItem.className = 'cart-item-enter flex items-center py-3 border-b'; + cartItem.innerHTML = ` +
+ ${item.name} +
+
+

${item.name}

+
+
+ + + +
+ $${itemTotal.toFixed(2)} +
+
+ + `; + cartItemsContainer.appendChild(cartItem); + + // Add animation class after a small delay + setTimeout(() => { + cartItem.classList.add('cart-item-enter-active'); + }, 10); + }); + + // Update totals + const tax = subtotal * 0.1; // 10% tax + const total = subtotal + tax; + + cartSubtotal.textContent = `$${subtotal.toFixed(2)}`; + cartTotal.textContent = `$${total.toFixed(2)}`; + + // Add event listeners to quantity buttons + document.querySelectorAll('.quantity-btn').forEach(button => { + button.addEventListener('click', (e) => { + const productId = parseInt(button.getAttribute('data-id')); + const action = button.getAttribute('data-action'); + const input = button.parentElement.querySelector('input'); + let quantity = parseInt(input.value); + + if (action === 'increase') { + quantity += 1; + } else { + quantity -= 1; + } + + updateQuantity(productId, quantity); + }); + }); + + // Add event listeners to remove buttons + document.querySelectorAll('.remove-item').forEach(button => { + button.addEventListener('click', (e) => { + const productId = parseInt(button.getAttribute('data-id')); + removeFromCart(productId); + }); + }); + + // Add event listeners to quantity inputs + document.querySelectorAll('.cart-item input[type="number"]').forEach(input => { + input.addEventListener('change', (e) => { + const productId = parseInt(input.closest('.cart-item').querySelector('.quantity-btn').getAttribute('data-id')); + const quantity = parseInt(input.value); + updateQuantity(productId, quantity); + }); + }); +} + +// Toggle cart sidebar +function toggleCart() { + cartSidebar.classList.toggle('translate-x-full'); + cartOverlay.classList.toggle('hidden'); + document.body.classList.toggle('overflow-hidden'); +} + +// Toggle search bar +function toggleSearch() { + searchBar.classList.toggle('hidden'); + if (!searchBar.classList.contains('hidden')) { + searchBar.querySelector('input').focus(); + } +} + +// Toggle mobile menu +function toggleMobileMenu() { + mobileMenu.classList.toggle('hidden'); +} + +// Event listeners +cartBtn.addEventListener('click', toggleCart); +closeCartBtn.addEventListener('click', toggleCart); +cartOverlay.addEventListener('click', toggleCart); +searchBtn.addEventListener('click', toggleSearch); +mobileMenuBtn.addEventListener('click', toggleMobileMenu); + +// Initialize +renderProducts(); + +// Add animation styles dynamically +const style = document.createElement('style'); +style.textContent = ` + @keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } + } + @keyframes fadeOut { + from { opacity: 1; transform: translateY(0); } + to { opacity: 0; transform: translateY(10px); } + } + .animate-fade-in { + animation: fadeIn 0.3s ease-out forwards; + } + .animate-fade-out { + animation: fadeOut 0.3s ease-out forwards; + } +`; +document.head.appendChild(style); \ No newline at end of file diff --git a/Projects/Nocommerce/style.css b/Projects/Nocommerce/style.css new file mode 100644 index 000000000..75806833e --- /dev/null +++ b/Projects/Nocommerce/style.css @@ -0,0 +1,21 @@ +.product-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} +.cart-item-enter { + opacity: 0; + transform: translateX(-20px); +} +.cart-item-enter-active { + opacity: 1; + transform: translateX(0); + transition: all 300ms ease-in; +} +.cart-item-exit { + opacity: 1; +} +.cart-item-exit-active { + opacity: 0; + transform: translateX(20px); + transition: all 300ms ease-out; +} diff --git a/img/projects/NoCommerce.png b/img/projects/NoCommerce.png new file mode 100644 index 000000000..0ee61c1c2 Binary files /dev/null and b/img/projects/NoCommerce.png differ diff --git a/projects.js b/projects.js index f2928959c..fb4260982 100644 --- a/projects.js +++ b/projects.js @@ -551,6 +551,14 @@ const projects = [ "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/myntra-clone", "project-link":"Projects/myntra-clone/index.html" }, + { + "title":"Nocommerce", + "tags":["HTML","CSS","JavaScript"], + "img":"img/projects/NoCommerce.png", + "description":"E commerce Landing page is used to display the products of the company. It is built using html, css and javascript .", + "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Nocommerce", + "project-link":"Projects/Nocommerce/index.html" + }, { "title":"Notes App", "tags":["HTML","CSS","JavaScript"],