Skip to content

Commit cae0a41

Browse files
CPetruzzoCPetruzzo
committed
feat(carmapottery): ✨ style and base html
1 parent e36d352 commit cae0a41

File tree

9 files changed

+373
-183
lines changed

9 files changed

+373
-183
lines changed

‎caropottery.html‎

Lines changed: 0 additions & 183 deletions
This file was deleted.

‎caropottery/caropottery.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Pottery Store</title>
8+
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<div class="logo">Carma Pottery</div>
15+
<nav>
16+
<a href="#">Home</a>
17+
<a href="#">Shop</a>
18+
<a href="#">About</a>
19+
<a href="#">Contact</a>
20+
</nav>
21+
</header>
22+
23+
<div class="hero">
24+
<h1>Handmade Pottery</h1>
25+
<p>Discover the beauty of artisanal ceramics, crafted with love and care.</p>
26+
</div>
27+
28+
<div class="product-grid">
29+
<div class="product">
30+
<img src="images/POT1.jfif" alt="Placeholder Image">
31+
<h3>Product Name 1</h3>
32+
<p>Short description of the product.</p>
33+
<div class="price">$20.00</div>
34+
<button onclick="addToCart('Product Name 1', '$20.00')">Add to Cart</button>
35+
</div>
36+
<div class="product">
37+
<img src="images/POT2.jfif" alt="Placeholder Image">
38+
<h3>Product Name 2</h3>
39+
<p>Short description of the product.</p>
40+
<div class="price">$25.00</div>
41+
<button onclick="addToCart('Product Name 2', '$25.00')">Add to Cart</button>
42+
</div>
43+
<div class="product">
44+
<img src="images/POT3.jfif" alt="Placeholder Image">
45+
<h3>Product Name 3</h3>
46+
<p>Short description of the product.</p>
47+
<div class="price">$20.00</div>
48+
<button onclick="addToCart('Product Name 3', '$20.00')">Add to Cart</button>
49+
</div>
50+
<div class="product">
51+
<img src="images/POT4.jfif" alt="Placeholder Image">
52+
<h3>Product Name 4</h3>
53+
<p>Short description of the product.</p>
54+
<div class="price">$25.00</div>
55+
<button onclick="addToCart('Product Name 4', '$25.00')">Add to Cart</button>
56+
</div>
57+
<div class="product">
58+
<img src="images/POT5.jfif" alt="Placeholder Image">
59+
<h3>Product Name 5</h3>
60+
<p>Short description of the product.</p>
61+
<div class="price">$20.00</div>
62+
<button onclick="addToCart('Product Name 5', '$20.00')">Add to Cart</button>
63+
</div>
64+
<div class="product">
65+
<img src="images/POT6.jfif" alt="Placeholder Image">
66+
<h3>Product Name 6</h3>
67+
<p>Short description of the product.</p>
68+
<div class="price">$25.00</div>
69+
<button onclick="addToCart('Product Name 6', '$25.00')">Add to Cart</button>
70+
</div>
71+
</div>
72+
73+
<div class="cart" onclick="toggleCart()">
74+
<img src="https://cdn-icons-png.flaticon.com/512/126/126510.png" alt="Cart Icon">
75+
</div>
76+
77+
<div class="cart-panel" id="cartPanel">
78+
<div class="cart-header">Your Cart</div>
79+
<div class="cart-content" id="cartContent">
80+
<ul id="cart-items"></ul>
81+
</div>
82+
<div class="cart-footer">
83+
<p>Total: $<span id="cart-total">0.00</span></p>
84+
<button class="close-cart" onclick="toggleCart()">Close</button>
85+
</div>
86+
</div>
87+
88+
<footer>
89+
&copy; 2025 Pottery Store. All rights reserved.
90+
</footer>
91+
92+
<script>
93+
let cart = []; // Declarar el arreglo cart aquí
94+
95+
function toggleCart() {
96+
cartPanel.classList.toggle('open');
97+
}
98+
99+
function addToCart(productName, productPrice) {
100+
// Convertir el precio a número y agregar al carrito
101+
const price = parseFloat(productPrice.replace('$', ''));
102+
cart.push({ name: productName, price });
103+
104+
// Actualizar el carrito completo
105+
updateCart();
106+
}
107+
108+
function updateCart() {
109+
const cartItems = document.getElementById('cart-items');
110+
const cartTotal = document.getElementById('cart-total');
111+
112+
// Limpiar la lista de productos
113+
cartItems.innerHTML = '';
114+
let total = 0;
115+
116+
// Recorrer el arreglo cart y actualizar la lista
117+
cart.forEach((item, index) => {
118+
total += item.price;
119+
120+
const li = document.createElement('li');
121+
li.textContent = `${item.name} - $${item.price.toFixed(2)}`;
122+
123+
const removeButton = document.createElement('button');
124+
removeButton.textContent = 'Remove';
125+
removeButton.style.marginLeft = '10px';
126+
removeButton.onclick = () => {
127+
cart.splice(index, 1); // Eliminar del arreglo
128+
updateCart(); // Actualizar el carrito visual
129+
};
130+
131+
li.appendChild(removeButton);
132+
cartItems.appendChild(li);
133+
});
134+
135+
// Actualizar el total
136+
cartTotal.textContent = total.toFixed(2);
137+
}
138+
139+
</script>
140+
141+
</body>
142+
143+
</html>

‎caropottery/images/POT1.jfif‎

381 KB
Binary file not shown.

‎caropottery/images/POT2.jfif‎

408 KB
Binary file not shown.

‎caropottery/images/POT3.jfif‎

375 KB
Binary file not shown.

‎caropottery/images/POT4.jfif‎

494 KB
Binary file not shown.

‎caropottery/images/POT5.jfif‎

456 KB
Binary file not shown.

‎caropottery/images/POT6.jfif‎

360 KB
Binary file not shown.

0 commit comments

Comments
 (0)