My E-Commerce Website
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
margin-right: 1em;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
#featured-products {
display: flex;
flex-wrap: wrap;
}
.product {
width: 25%;
padding: 1em;
box-sizing: border-box;
}
footer {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
// function to fetch products from the database and display them on the page
function displayFeaturedProducts() {
fetch(‘api/products.php’)
.then(response => response.json())
.then(products => {
// create HTML elements for each product
const productElements = products.map(product => {
const element = document.createElement(‘div’);
element.classList.add(‘product’);
element.innerHTML = `
${product.name}
$${product.price}
Add to Cart
`;
return element;
});
// add the product elements to the featured products section
const featuredProducts = document.querySelector(‘#featured-products’);
productElements.forEach(element => featuredProducts.appendChild(element));
});
}
// call the function to display featured products when the page loads
document.addEventListener(‘DOMContentLoaded’, () => {
displayFeaturedProducts();
});
<!–?php// connect to the database
RLF 