trendwave

byAnuja Lachake

Create a complete, modern, fully responsive online shopping website called “Trendwave”. 1. Website Technology Build the website using: - HTML5 - CSS3 - JavaScript - Bootstrap or modern responsive CSS - Use local/sample product data in JavaScript - No broken links or buttons - The website should work properly on both mobile and desktop - Organize the project into separate HTML, CSS, JavaScript and assets files - Write clean, beginner-friendly code suitable for a TYBCS college project 2. Website Design Create a modern e-commerce design similar to popular online shopping websites, but with an original Trendwave design. Use: - Trendwave logo - Clean navigation bar - Search bar - Product cards - Product images - Category sections - Attractive banners - Discount badges - Ratings - Responsive footer - Smooth hover effects - Modern typography - Mobile hamburger menu 3. Main Navigation Navigation menu should contain: Home Categories Products Deals Wishlist Cart My Account Add a search icon/search bar and cart/wishlist counters. 4. Home Page Create an attractive homepage containing: - Header/navigation - Hero banner - “Shop Now” button - Popular Categories - Trending Products - New Arrivals - Best Deals - Recommended Products - Customer Reviews - Newsletter section - Footer The buttons must actually work and navigate to the correct pages. 5. Categories Page Create a complete categories page with: - Women's Fashion - Men's Fashion - Footwear - Beauty & Personal Care - Electronics - Home & Kitchen - Bags & Accessories Each category should be clickable and display products belonging to that category. 6. Product Listing Page Create a product listing page with at least 20 realistic sample products. Each product should contain: - Product image - Product name - Category - Original price - Discounted price - Discount percentage - Star rating - Add to Cart button - Wishlist button - View Details button Add working: - Search - Category filter - Price filter - Rating filter - Sort by price - Sort by rating - Sort by newest 7. Product Details Page When the user clicks “View Details”, open a product details page. Show: - Product images - Product name - Rating - Reviews count - Original price - Discounted price - Available sizes where applicable - Available colors - Quantity selector - Product description - Specifications - Add to Cart - Buy Now - Add to Wishlist The selected product information should be dynamically loaded using JavaScript. 8. Shopping Cart Create a fully functional cart. Features: - Add products - Remove products - Increase/decrease quantity - Automatically calculate subtotal - Discount - Delivery charge - Final total - Empty cart message - Proceed to Checkout button Save cart information using localStorage, so the cart remains after refreshing the page. 9. Wishlist Create a working wishlist. Users should be able to: - Add products - Remove products - Move product to cart Save wishlist data using localStorage. 10. Login and Registration Create: Login Page - Email/mobile number - Password - Login button - Remember me - Forgot password - Link to registration Registration Page - Full name - Email - Mobile number - Password - Confirm password - Create Account button For this college project, use JavaScript/localStorage for demo authentication. Clearly structure the code so a real backend can be connected later. 11. My Account Create an account dashboard containing: - Profile - My Orders - Wishlist - Saved Addresses - Account Settings - Logout 12. Checkout Page Create a working checkout page with: Delivery Address - Full name - Mobile number - Address - City - State - PIN code Order Summary - Products - Quantity - Price - Delivery charge - Total Payment Method - Cash on Delivery - UPI - Card - Demo payment option For the college project, payment can be simulated. Do not connect to a real payment gateway. 13. Order Confirmation After placing an order, display: “Order Placed Successfully!” Show: - Order ID - Ordered products - Total amount - Delivery address - Estimated delivery date - Continue Shopping button - View Orders button Save orders in localStorage. 14. Deals Page Create a special deals page showing: - Today's Deals - Discounted products - Limited-time offers - Sale banners Add working product buttons. 15. About Us Create an About Us page explaining: Trendwave is a modern online shopping platform created to provide customers with a simple, convenient and user-friendly shopping experience. Include: - Our Mission - Our Vision - Why Choose Trendwave 16. Contact Us Create a Contact Us page containing: - Name - Email - Phone - Message - Submit button - Customer support information - Social media icons Form validation should work using JavaScript. 17. FAQ Create frequently asked questions about: - Orders - Payment - Delivery - Returns - Refunds - Account - Wishlist Use expandable FAQ sections. 18. Footer Footer should contain: Trendwave - About Us - Contact Us - FAQ Customer Service - Help Center - Shipping Information - Returns & Refunds Policies - Privacy Policy - Terms & Conditions - Return Policy Social Media - Instagram - Facebook - YouTube - Twitter/X 19. Search Create a working global product search. When the user searches for a product, show matching products dynamically. Example: Searching “shoes” should display footwear products. 20. Responsive Design The entire website must work properly on: - Mobile - Tablet - Laptop - Desktop Make sure product cards, navigation, images, buttons and forms adjust correctly on small screens. 21. JavaScript Functionality Implement working JavaScript for: - Product rendering - Search - Filters - Sorting - Product details - Add to cart - Remove from cart - Quantity update - Wishlist - Login - Registration - Logout - Checkout - Order placement - Order history - localStorage - Form validation - Navigation - Toast/success messages 22. Project Structure Create the project with a structure similar to: Trendwave/ │ ├── index.html ├── categories.html ├── products.html ├── product-details.html ├── deals.html ├── wishlist.html ├── cart.html ├── checkout.html ├── order-success.html ├── login.html ├── register.html ├── account.html ├── orders.html ├── about.html ├── contact.html ├── faq.html ├── privacy.html ├── terms.html ├── return-policy.html │ ├── css/ │ └── style.css │ ├── js/ │ ├── products.js │ ├── app.js │ ├── cart.js │ ├── auth.js │ └── checkout.js │ └── assets/ ├── images/ └── icons/ 23. Important Requirements - All navigation links must work. - All buttons must perform their intended actions. - No empty pages. - No placeholder “Coming Soon” sections. - No console errors. - Use realistic sample products. - Use localStorage for cart, wishlist, users and orders. - Use attractive product images from reliable publicly accessible image URLs or suitable local assets. - Add comments explaining important JavaScript functions. - Make the project easy for a college student to understand and explain during a viva. - Include a README explaining how to run the project. Finally, provide the complete project code file-by-file and explain how to run the website locally. main thing is that use my images given to you ,i want same logo,same color combination,everthing same ,don,t change anything .