ABSTRACT

This report describes a simple shopping website we built using basic web technologies: HTML,
CSS, and JavaScript. The most special thing about this website is that it works entirely inside your
web browser. This means it doesn't need an expensive server or a complicated database to run.
You can browse for products, add them to a shopping cart or a wishlist, and even go through a
pretend checkout process.

To make sure you don't lose your items, the website uses the browser's own memory (called
Local Storage) to save your cart and wishlist. So, if you close the page and come back later,
everything will be right where you left it.

Features

• Product Browsing: You can look through all the products, which are displayed in a clean
grid. To find what you want, you can filter them by category (like "Electronics" or
"Gaming"), search for them using keywords, or sort them by price or name.

• Shopping Cart: You can add or remove items from your cart, change how many of each
item you want, and watch the total price update automatically with every change.

• Wishlist: You can save products you're interested in but aren't ready to buy yet. Later, you
can move them from your wishlist to your shopping cart with just one click.

• Checkout: The website has a simple checkout process. It pretends to place your order and
then shows you a "Thank You" message, providing a complete shopping experience from
start to finish.

Technologies

• HTML5 & CSS3: We used HTML to build the "skeleton" of the pages (the structure) and
CSS to give it "clothes" (the visual style). This makes the website look good and work well
on any device, from a large computer monitor to a small phone screen.

• JavaScript (ES6+): This is the "brain" of the website. It handles all the interactive parts, like
what happens when you click a button, how the cart total is calculated, and how products
are filtered. We kept the code in organized files so it's easy to read and understand.

• Browser Local Storage: The website uses the browser's built-in "notepad" to save your
data, like the items in your cart. This makes the experience feel personal and persistent.

The code is organized into simple files, making it easy for anyone to understand or make changes.
In the future, this project could be expanded by connecting it to a real server to handle user
accounts or by adding real payment options.
Table of Contents

Abstract

1. Introduction
o 1.1 Why This Project?
o 1.2 What We Solved
o 1.3 Goals
o 1.4 What’s Included

2. How It’s Built

o 2.1 Tools We Used
o 2.2 File Organization

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 in Detail

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 Responsive Design & Compatibility
o 5.3 User Feedback & Improvements

6. Problems and Lessons

o 6.1 Synchronization Challenges
o 6.2 Design Trade-Offs
o 6.3 Project Management Lessons

7. Wrap-Up
o 7.1 What We Learned
o 7.2 Next Steps
1. Introduction

1.1 Why This Project?

Many people who are learning to code or small businesses that are just starting out need a
simple example of an online store. This project was created to be that example—a fully working
e-commerce site that doesn't require any complex or expensive backend setup.

1.2 What We Solved

Most free website templates for online stores are either too simple and don't work, or they
require you to have a server, which can be complicated and costly. We built a solution that is
lightweight, completely free to run, and works in any modern web browser right out of the box.

1.3 Goals

Our main goals for this project were to:

• Make a website that works perfectly on mobile phones.

• Allow users to add items to a shopping cart and a wishlist.

• Show live updates for totals and quantities without needing to reload the page.

• Keep the code organized and easy to understand, so others can learn from it or build on
top of it.

1.4 What's Included

The project is a complete, though simulated, e-commerce site. It includes:

• A page showing all products with search and filters.

• A detailed page for each individual product.

• Shopping cart and wishlist pages where you can manage your items.

• A simple login and registration system (this is just a demonstration and doesn't connect to
a server).

• A contact page.2. How It’s Built

2.1 Tools We Used

• HTML (The Skeleton): We used HTML to structure every page. It defines all the different
parts, like headings, paragraphs, images, and buttons.

• CSS (The Clothes): We used CSS to style the website. It controls everything you see, from
colors and fonts to the layout of the page. It’s what makes the website look appealing and
professional.

• JavaScript (The Brain): JavaScript is what brings the website to life. It listens for your clicks
and actions and responds accordingly. When you click "Add to Cart," it's JavaScript that
adds the item and updates the total.

• Local Storage (The Notepad): This is a feature built into your web browser. We use it like a
small notepad to jot down important information, such as which items are in your cart.
This way, the website can remember your choices even after you've closed it.

2.2 File Organization

To avoid a big mess, we organized all our code into different files and folders. This makes it much
easier to find and work on specific parts of the site:

project-root/

├─ index.html // Home page

├─ products.html // List of all products

├─ product-detail.html// Single product information page

├─ cart.html // Shopping cart view

├─ wishlist.html // Wishlist page

├─ checkout.html // Checkout confirmation page

├─ login.html // Login form (simulated)

├─ register.html // Registration form (simulated)

├─ contact.html // Contact page with form

├─ header.html // Common header component

├─ footer.html // Common footer component

├─ style.css // Main stylesheet

├─ code.js // Core application logic (data, cart, wishlist)

├─ utils.js // Helper functions (HTML loading, etc.)

└─ images/ // Folder for all product and UI images

3. Building the Site

3.1 HTML Structure: Building It Smart, Not Hard

Every page on our site needs the same header menu at the top and the same footer at the
bottom. Instead of copying and pasting this code into every single HTML file, we did something
clever. We created the header and footer just once, in their own files (header.html and
footer.html).

Then, on each page (like index.html), we just put an empty placeholder div:

Indexx.html:-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>ElectroShop</title>

<link rel="stylesheet" href="style.css" />

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"

/>

<link rel="icon" type="image/png" href="images/favicon.png" />

<!-- Include Poppins font if not already in style.css body -->

<link

href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"

rel="stylesheet"

/>
</head>

<body>

<div id="header-placeholder"></div>

<div id="add-to-cart-notification" class="notification"></div>

<main class="container">

<section class="hero">

<h1>Discover Amazing Products</h1>

<p>Your one-stop shop for electronics, gadgets, and more!</p>

<div class="hero-search-bar-container">

<input

type="text"

id="product-search"

placeholder="Search for products..."

/>

<button class="btn" onclick="searchProducts()">Search</button>

</div>

<a href="products.html" class="btn">Shop All Products</a>

</section>

<h2 class="section-title">Featured Products</h2>

<div id="featured-products-grid" class="product-grid">

<!-- Featured products will be loaded here by JavaScript -->

</div>

</main>

<div id="footer-placeholder"></div>
 <script src="utils.js"></script>

<script src="code.js"></script>

<script>

// Homepage specific initialization

document.addEventListener("DOMContentLoaded", () => {

initCartIcon(); // Update cart count on nav

updateAuthLinks(); // Update authentication links

loadFeaturedProducts(); // Load specific featured products

// The search input listener for the homepage

const searchInput = document.getElementById("product-search");

if (searchInput) {

searchInput.addEventListener("keyup", (event) => {

if (event.key === "Enter") {

searchProducts();

});

});

</script>

</body>

</html>

A small piece of JavaScript in our utils.js file automatically finds this placeholder and fills it with
the code from header.html. This is incredibly efficient—if we need to change a link in the menu,
we only have to change it in one place, and it updates across the entire site!

// utils.js

// This function loads parts of the page for us

async function loadHTML(elementId, filePath) {

 // 1. Go and get the file (like header.html)

const response = await fetch(filePath);

// 2. Read the text content inside that file

const html = await response.text();

// 3. Find the placeholder on the page and put the content inside it

document.getElementById(elementId).innerHTML = html;

3.2 Styling with CSS

All the visual rules for the website are in one file: style.css. We used modern CSS features like
Flexbox and Grid to easily create layouts that look great. For example, the product grid
automatically adjusts how many items are in each row based on your screen size.

The CSS file also contains media queries. These are special rules that only apply when the screen
is a certain size. This is how we make the site look just as good on a narrow phone screen as it
does on a wide desktop monitor.

3.3 JavaScript Code: The "Magic" Behind the Scenes

All the interactive logic happens in the code.js file.

The Product Database Since we don't have a real database, we created a list of all our products
directly in the JavaScript file. Each product is an "object," which is like a digital index card
containing all its information:

// code.js

const allProducts = [

id: 7,
 name: "Alienware Laptop",

price: 1599.99,

image: "images/Alienware-laptop.png",

category: "Electronics"

},

// ... and so on for every other product

];

How Adding to the Cart Works: A Step-by-Step Guide

When you click an "Add to Cart" button, a chain of events happens in an instant:

// code.js

let cart = [];

function addToCart(productId) {

// 1. Find the full product details using its ID

const productToAdd = allProducts.find(p => p.id === productId);

// 2. Add the found product to our 'cart' list

cart.push(productToAdd);

// 3. Show a friendly message on the screen

showNotification(`${productToAdd.name} was added to your cart!`);

// 4. Save the cart to the browser's memory so we don't lose it

saveCartToLocalStorage();

3.4 Saving Data in the Browser

To remember your cart after you close the page, we use Local Storage. You can think of it as a
small, private notepad that your browser keeps just for our website.

// Save cart

localStorage.setItem('electroShopCart', JSON.stringify(cart));

// Load cart

const savedCart = JSON.parse(localStorage.getItem('electroShopCart') || '[]');

cart = savedCart;

output:-
4. Key Features in Detail

4.1 Browsing and Filtering Products

On the Products page, when you type in the search box, choose a category, or select a sorting
option, a function called filterAndSortProducts runs instantly. It filters the main product list down
to only the items that match, then redraws the product grid.

4.2 Product Details

When you click on a product, the URL becomes product-detail.html?id=7. JavaScript reads the id
from the query string, finds the product object, and displays its details.

Output:-

4.3 Shopping Cart

In cart.html, clicking the + or - buttons calls functions like increaseQuantity or removeFromCart,

which update cart, recalculate totals, and update the DOM instantly.

Output:-
4.4 Wishlist

The wishlist is managed similarly to the cart, using a separate Local Storage key
(electroShopWishlist). Items can be moved between wishlist and cart with one click.

4.5 Checkout Process

Clicking "Proceed to Checkout" runs:

function proceedToCheckout() {

if (cart.length === 0) {

alert('Your cart is empty!');

return;

clearCart();

window.location.href = 'checkout.html';

Output:-
5. Testing and Feedback

• Tested on Chrome, Firefox, and Safari.

• Used responsive design with media queries to ensure usability on phones and desktops.

• Friends suggested larger buttons and darker text for readability.

6. Problems and Lessons

• Synchronization: Keeping the cart icon counter and Local Storage in sync required careful
function calls.

• Design Trade-Offs: No server meant simplicity and speed, but no real accounts or
payments.

• Project Management: Breaking code into logic and helpers files kept things clean.

7. Wrap-Up

7.1 What We Learned

You can build a rich, interactive site with just frontend tools, perfect for learning core web
development concepts.
7.2 Next Steps

• Connect to a real backend API for products.

• Add real user authentication and order history.

• Integrate a payment gateway like Stripe or PayPal.

Output-