ABSTRACT
This report describes a simple, frontend-only e-commerce website built
with HTML, CSS, and JavaScript. It works entirely in the browser—no
server or database needed. Users can browse products, add them to a
cart or wishlist, and go through a checkout process. Everything is saved
locally using the browser’s storage so data stays when you close and
reopen the page.
Features
Product Browsing: View items in a responsive grid. Filter by
category, search by keyword, and sort by price or rating.
Shopping Cart: Add or remove items, change quantities, and see
live updates of totals, tax, and shipping.
Wishlist: Save favorite products and move them to the cart with
one click.
Checkout: Fill in a simple form with real-time checks for email,
phone, and address. Review your order before “placing” it.
Technologies
HTML5 & CSS3: Semantic markup, flexible layouts, and responsive
design.
JavaScript (ES6+): Organized code in modules, event-driven
updates, and local Storage for saving data.
Accessibility: Basic ARIA roles and focus styles for keyboard users.
The code is organized into simple files and folders, making it easy to
understand and extend. Future improvements could include connecting to
a real server, adding user accounts, or integrating payment gateways.
Table of Contents
1. Introduction
o 1.1 Why We Did This
o 1.2 The Problem
o 1.3 What We Wanted to Achieve
o 1.4 What’s Included
o 1.5 Who This Is For
2. How It’s Built
o 2.1 Tools We Used
o 2.2 File Organization
o 2.3 Design Choices
o 2.4 Main Pages and Features
3. Building the Site
o 3.1 HTML Structure
o 3.2 Styling with CSS
o 3.3 JavaScript Code
o 3.4 Saving Data in the Browser
4. Key Features
o 4.1 Browsing and Filtering Products
o 4.2 Product Details
o 4.3 Shopping Cart
o 4.4 Wishlist
o 4.5 Checkout Process
5. Testing and Feedback
o 5.1 How We Tested
o 5.2 Making It Work Everywhere
o 5.3 What Users Said
6. Problems and Lessons
o 6.1 Technical Hurdles
o 6.2 Design Trade-Offs
o 6.3 Managing the Project
7. Wrap-Up
o 7.1 What We Learned
o 7.2 Next Steps
1. Introduction
1.1 Why This Project?
Small businesses and learners often need a basic e-commerce example
without complex backend setup. This project shows how to build a
working online store using only frontend code.
1.2 What We Solved
Most free e-commerce templates require servers or paid services. We
built a lightweight, open solution that runs in any modern browser.
1.3 Goals
Make it mobile-friendly.
Let users add items to cart and wishlist.
Show live totals and form checks.
Keep code modular for easy updates.
1.4 What's Included
Product list and details
Cart and checkout pages
Wishlist
Simple login/register forms (no real authentication)
Contact page
2. Design and Structure
2.1 Tech Stack
HTML: Clear page structure with semantic tags.
CSS: Flexbox and Grid for layout, media queries for mobile.
JavaScript: Split into files for API (fake), UI helpers, cart, wishlist,
and form checks.
Local Storage: Keeps cart and wishlist data across sessions.
2.2 Files and Folders
project-root/
├ index.html // Home page
├ products.html // List of products
├ product-detail.html// Product info page
├ cart.html // Shopping cart
├ wishlist.html // Wishlist page
├ checkout.html // Checkout form
├ login.html // Login form (no real backend)
├ register.html // Registration form
├ contact.html // Contact page
├ header.html // Common header include
├ footer.html // Common footer include
├ style.css // Main styles
├ code.js // Main logic (cart, wishlist)
├ utils.js // Helper functions
└ images/ // All images
2.3 Pages Overview
Home: Banner or intro.
Products: Grid of items with filters.
Product Detail: Images, description, add to cart/wishlist buttons.
Cart: Edit quantities, remove items, see totals.
Wishlist: List saved items, move to cart.
Checkout: Form with email, phone, address, summary.
Login/Register: Simple forms (not functional).
Contact: Static contact info.
3. How It Works
3.1 Loading Data
A fake API file (api.js) returns a list of products stored in code. When
pages load, JavaScript fetches this list and shows items.
3.2 Cart & Wishlist
Local Storage: Two arrays store cart items ({id, quantity}) and
wishlist item IDs.
Updating UI: When data changes, custom events trigger UI updates
to show new counts and lists.
3.3 Searching and Filtering
Input field listens for typing. After a short pause (debounce), it
filters products by title or category and updates the grid.
3.4 Form Validation
Email: Simple regex check.
Phone: Must start with 6–9 and be 10 digits.
Address: At least 10 characters. Errors show next to fields in real
time.
4. Main Features
4.1 Product Listing
Category filters (checkboxes).
Sort options (price, rating).
Live search.
4.2 Product Detail
Image carousel (arrows).
Zoom on hover.
Tabs for description and reviews (placeholder).
4.3 Shopping Cart
+ and - buttons change quantities.
Totals update instantly.
Remove button with a slide-out effect.
4.4 Wishlist
Heart icon toggles save/unsave.
“Move to Cart” button next to each item.
4.5 Checkout
Three steps: Shipping → Payment (fake) → Review.
Progress bar shows current step.
Summary before “placing” order.
5. Testing and Feedback
Tested on Chrome, Firefox, Safari, Edge, and mobile.
Edge cases: empty cart, invalid forms, many items.
Asked 8 people to try it; improved button size and color contrast
based on feedback.
6. Challenges and Takeaways
Keeping state in sync across files without a framework.
Making animations smooth when many elements change.
Handling localStorage limits.
7. Conclusion and Next Steps
This project shows how to build a simple, offline-capable e-commerce site
using only frontend code. It’s perfect for learning and demos.
Next steps
Connect to a real backend API.
Add user login and real data storage.
Integrate a payment gateway.
Add analytics and recommendations.
End of Report
