Scribd
Upload
5 views6 pages

Ecommerce Website

The document contains an HTML structure for a product page, including a header, main product container, and a footer with a shopping cart. It also includes CSS styles for layout and design, as well as JavaScript classes for managing products and shopping cart functionality. The JavaScript dynamically adds products to the page and allows users to add or remove items from the cart.

Uploaded by

amansinghwwe471
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views6 pages

Ecommerce Website

The document contains an HTML structure for a product page, including a header, main product container, and a footer with a shopping cart. It also includes CSS styles for layout and design, as well as JavaScript classes for managing products and shopping cart functionality. The JavaScript dynamically adds products to the page and allows users to add or remove items from the cart.

Uploaded by

amansinghwwe471
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Html file

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

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

<title>Product Page</title>

<link rel=”stylesheet” href=”[Link]”>

</head>

<body>

<header>

<h1>Product Page</h1>

</header>

<main id=”product-container”>

<!—Products will be added dynamically here →

</main>

<footer>

<div id=”cart”>

<h2>Shopping Cart</h2>

<ul id=”cart-items”>

<!—Cart items will be added dynamically →

</ul>

</div>

</footer>
<script src=”[Link]” defer></script>

</body>

</html>

Css file

Body {

Font-family: Arial, sans-serif;

Margin: 0;

Padding: 0;

Header, footer {

Padding: 20px;

Background-color: #f0f0f0;

#cart {

Background-color: #f9f9f9;

Padding: 20px;

Margin-top: 20px;

}
#cart h2 {

Margin-bottom: 10px;

#cart-items {

List-style-type: none;

Padding: 0;

#cart-items li {

Margin-bottom: 10px;

Javascript file folder

// Product class to create product objects

Class Product {

Constructor(name, price) {

[Link] = name;

[Link] = price;

// ShoppingCart class to manage cart operations


Class ShoppingCart {

Constructor() {

[Link] = [];

// Method to add product to cart

addToCart(product) {

[Link](product);

[Link]();

// Method to remove product from cart

removeFromCart(index) {

[Link](index, 1);

[Link]();

// Method to update cart display

updateCart() {

const cartItems = [Link](‘cart-items’);

[Link] = ‘’;

[Link]((item, index) => {

const newItem = [Link](‘li’);

[Link] = `${[Link]} - $${[Link]}`;

const removeBtn = [Link](‘button’);

[Link] = ‘Remove’;
[Link](‘click’, () => {

[Link](index);

});

[Link](removeBtn);

[Link](newItem);

});

// Initialize shopping cart

Const shoppingCart = new ShoppingCart();

// Sample products

Const products = [

New Product(‘Product 1’, 10.00),

New Product(‘Product 2’, 15.00),

// Add more products as needed

];

// Add products to the product container

Const productContainer = [Link](‘product-container’);

[Link](product => {

Const productDiv = [Link](‘div’);

[Link](‘product’);

[Link] = `

<h2>${[Link]}</h2>
<p>Price: $${[Link]}</p>

<button class=”add-to-cart-btn”>Add to Cart</button>

`;

Const addToCartBtn = [Link](‘.add-to-cart-btn’);

[Link](‘click’, () => {

[Link](product);

});

[Link](productDiv);

});

You might also like