Skip to content

Commit ed7b713

Browse files
tajulafreentajulafreen
authored
Merge pull request #48 from tajulafreen/E-commerce_Website
50Projects-HTML-CSS-JavaScript : E-commerce website
2 parents 0c7d9ba + cde2b3b commit ed7b713

4 files changed

Lines changed: 282 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -499,16 +499,25 @@ In order to run this project you need:
499499
<li>
500500
<details>
501501
<summary>Pomodoro Timer</summary>
502-
<p>The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.
503-
504-
</p>
502+
<p>The Productivity Timer (Pomodoro Timer) is a simple yet effective timer application based on the Pomodoro technique. It helps users stay productive by alternating between focus intervals (e.g., 5 minutes) and short breaks (e.g., 2 minutes). The app provides visual cues through animations and sound alerts to signal transitions between focus and break periods.</p>
505503
<ul>
506504
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/PomodoroTimer/">Live Demo</a></li>
507505
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/PomodoroTimer">Source</a></li>
508506
</ul>
509507
</details>
510508
</li>
511509

510+
<li>
511+
<details>
512+
<summary>E-Commerce Website</summary>
513+
<p>This is a simple e-commerce product page built using **HTML**, **CSS**, and **JavaScript**. It displays a list of products fetched from a public API and allows users to add products to their cart. The page features a cart modal where users can view the products they have added, including quantity and total price.</p>
514+
<ul>
515+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/E-CommerceWebsite/">Live Demo</a></li>
516+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/E-CommerceWebsite">Source</a></li>
517+
</ul>
518+
</details>
519+
</li>
520+
512521
</ol>
513522

514523
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/E-CommerceWebsite/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>E-Commerce Product Page</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<div class="navbar">
12+
<h2>E-Commerce Store</h2>
13+
<button id="cart-btn">View Cart</button>
14+
</div>
15+
</header>
16+
17+
<div class="container">
18+
<h1>Products</h1>
19+
<div id="products-container" class="products-container"></div>
20+
</div>
21+
22+
<!-- Cart Modal -->
23+
<div id="cart-modal" class="cart-modal">
24+
<div class="cart-content">
25+
<h2>Your Cart</h2>
26+
<ul id="cart-items"></ul>
27+
<button id="close-cart">Close</button>
28+
</div>
29+
</div>
30+
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎Source-Code/E-CommerceWebsite/script.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* eslint-disable no-unused-vars */
2+
// Fake API URL (you can replace this with a real API if needed)
3+
const apiUrl = 'https://fakestoreapi.com/products';
4+
5+
// Elements
6+
const productsContainer = document.getElementById('products-container');
7+
const cartBtn = document.getElementById('cart-btn');
8+
const cartModal = document.getElementById('cart-modal');
9+
const closeCartBtn = document.getElementById('close-cart');
10+
const cartItemsList = document.getElementById('cart-items');
11+
12+
// Cart array to store added products
13+
const cart = [];
14+
15+
// Display fetched products
16+
const displayProducts = (products) => {
17+
productsContainer.innerHTML = ''; // Clear previous products
18+
19+
products.forEach((product) => {
20+
const productElement = document.createElement('div');
21+
productElement.classList.add('product');
22+
productElement.innerHTML = `
23+
<img src="${product.image}" alt="${product.title}">
24+
<h3 class="title">${product.title}</h3>
25+
<p class="price">$${product.price}</p>
26+
<button onclick="addToCart(${product.id}, '${product.title}', '${product.image}', ${product.price})">Add to Cart</button>
27+
`;
28+
productsContainer.appendChild(productElement);
29+
});
30+
};
31+
32+
// Fetch products from API
33+
async function fetchProducts() {
34+
try {
35+
const response = await fetch(apiUrl);
36+
const products = await response.json();
37+
displayProducts(products);
38+
} catch (error) {
39+
console.error('Error fetching products:', error);
40+
}
41+
}
42+
43+
// Add product to cart
44+
const addToCart = (id, title, image, price) => {
45+
const existingProductIndex = cart.findIndex((item) => item.id === id);
46+
47+
if (existingProductIndex === -1) {
48+
cart.push({
49+
id,
50+
title,
51+
image,
52+
price,
53+
quantity: 1,
54+
});
55+
} else {
56+
cart[existingProductIndex].quantity += 1;
57+
}
58+
59+
console.log(cart); // You can replace this with a cart UI or alert
60+
alert(`${title} added to cart!`);
61+
};
62+
63+
// Close cart modal
64+
closeCartBtn.addEventListener('click', () => {
65+
cartModal.style.display = 'none';
66+
});
67+
68+
// Display cart contents
69+
const displayCart = () => {
70+
cartItemsList.innerHTML = ''; // Clear previous cart items
71+
72+
cart.forEach((item) => {
73+
const cartItem = document.createElement('li');
74+
cartItem.innerHTML = `
75+
<span>${item.title} (x${item.quantity})</span>
76+
<span>$${item.price * item.quantity}</span>
77+
`;
78+
cartItemsList.appendChild(cartItem);
79+
});
80+
};
81+
82+
// Open cart modal
83+
cartBtn.addEventListener('click', () => {
84+
if (cart.length === 0) {
85+
alert('Your cart is empty.');
86+
} else {
87+
displayCart();
88+
cartModal.style.display = 'flex';
89+
}
90+
});
91+
92+
// Initialize
93+
fetchProducts();

‎Source-Code/E-CommerceWebsite/style.css‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f9f9f9;
6+
}
7+
8+
header {
9+
background-color: #333;
10+
color: #fff;
11+
padding: 10px 20px;
12+
text-align: center;
13+
}
14+
15+
.navbar {
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
}
20+
21+
#cart-btn {
22+
background-color: #28a745;
23+
color: white;
24+
border: none;
25+
padding: 10px 20px;
26+
font-size: 1rem;
27+
cursor: pointer;
28+
border-radius: 5px;
29+
}
30+
31+
#cart-btn:hover {
32+
background-color: #218838;
33+
}
34+
35+
.container {
36+
margin: 50px auto;
37+
padding: 20px;
38+
background: #fff;
39+
border-radius: 10px;
40+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
41+
max-width: 1000px;
42+
}
43+
44+
h1 {
45+
margin-bottom: 30px;
46+
}
47+
48+
.products-container {
49+
display: grid;
50+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
51+
gap: 20px;
52+
}
53+
54+
.product {
55+
border: 1px solid #ddd;
56+
border-radius: 10px;
57+
padding: 10px;
58+
text-align: center;
59+
background-color: #fff;
60+
}
61+
62+
.product img {
63+
max-width: 100%;
64+
height: 300px;
65+
border-radius: 10px;
66+
}
67+
68+
.product .title {
69+
font-size: 1.1rem;
70+
font-weight: bold;
71+
margin: 10px 0;
72+
height: 60px;
73+
overflow: hidden;
74+
}
75+
76+
.product .price {
77+
font-size: 1rem;
78+
color: #333;
79+
margin: 10px 0;
80+
}
81+
82+
.product button {
83+
background-color: #007bff;
84+
color: white;
85+
border: none;
86+
padding: 10px;
87+
font-size: 1rem;
88+
cursor: pointer;
89+
border-radius: 5px;
90+
width: 100%;
91+
}
92+
93+
.product button:hover {
94+
background-color: #0056b3;
95+
}
96+
97+
/* Cart Modal Styles */
98+
.cart-modal {
99+
position: fixed;
100+
top: 0;
101+
left: 0;
102+
width: 100%;
103+
height: 100%;
104+
background-color: rgba(0, 0, 0, 0.7);
105+
display: none;
106+
justify-content: center;
107+
align-items: center;
108+
z-index: 1000;
109+
}
110+
111+
.cart-content {
112+
background-color: white;
113+
padding: 20px;
114+
border-radius: 10px;
115+
max-width: 500px;
116+
width: 100%;
117+
text-align: left;
118+
}
119+
120+
#cart-items {
121+
list-style-type: none;
122+
padding: 0;
123+
}
124+
125+
#cart-items li {
126+
display: flex;
127+
justify-content: space-between;
128+
padding: 5px 0;
129+
}
130+
131+
#close-cart {
132+
margin-top: 20px;
133+
background-color: #dc3545;
134+
color: white;
135+
border: none;
136+
padding: 10px;
137+
font-size: 1rem;
138+
cursor: pointer;
139+
border-radius: 5px;
140+
}
141+
142+
#close-cart:hover {
143+
background-color: #c82333;
144+
}

0 commit comments

Comments
 (0)