Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dbe3774

Browse files
Add the project
1 parent 29df447 commit dbe3774

File tree

3 files changed

+271
-0
lines changed

3 files changed

+271
-0
lines changed
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: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
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+
}
145+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /