Sure! Here’s a simple example of a product e-commerce website using HTML, CSS, and a bit of JavaScript. This will include a basic layout for displaying products and a shopping cart feature. You can expand upon it based on your needs.
### HTML (index.html)
```html
E-commerce Website
```
### CSS (styles.css)
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #333;
color: white;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
h1 {
margin: 0;
}
#cart {
cursor: pointer;
}
.product-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}
.product {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: white;
text-align: center;
}
.product img {
max-width: 100%;
height: auto;
}
button {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
```
### JavaScript (script.js)
```javascript
const products = [
{ id: 1, name: "Product 1", price: 29.99, image: "https://via.placeholder.com/150" },
{ id: 2, name: "Product 2", price: 39.99, image: "https://via.placeholder.com/150" },
{ id: 3, name: "Product 3", price: 19.99, image: "https://via.placeholder.com/150" },
{ id: 4, name: "Product 4", price: 49.99, image: "https://via.placeholder.com/150" },
{ id: 5, name: "Product 5", price: 9.99, image: "https://via.placeholder.com/150" },
{ id: 6, name: "Product 6", price: 14.99, image: "https://via.placeholder.com/150" },
{ id: 7, name: "Product 7", price: 24.99, image: "https://via.placeholder.com/150" },
{ id: 8, name: "Product 8", price: 34.99, image: "https://via.placeholder.com/150" },
{ id: 9, name: "Product 9", price: 44.99, image: "https://via.placeholder.com/150" },
{ id: 10, name: "Product 10", price: 59.99, image: "https://via.placeholder.com/150" },
];
let cart = [];
function displayProducts() {
const productList = document.getElementById('product-list');
products.forEach(product => {
const productDiv = document.createElement('div');
productDiv.className = 'product';
productDiv.innerHTML = `
My E-commerce Store
🛒 Cart (0)
${product.name}
$${product.price.toFixed(2)}
`; productList.appendChild(productDiv); }); } function addToCart(productId) { const product = products.find(p => p.id === productId); if (product) { cart.push(product); document.getElementById('cart-count').innerText = cart.length; alert(`${product.name} has been added to your cart!`); } } window.onload = displayProducts; ``` ### How to Use This Code 1. **Create a new directory** for your project. 2. **Create three files**: `index.html`, `styles.css`, and `script.js`, and copy the corresponding code into each file. 3. **Open `index.html`** in a web browser to see the e-commerce website in action. You can customize the product details, styles, and add more functionality as needed. Let me know if you have any questions or need further assistance!
Comments
Post a Comment