diff --git a/Home-Kitchen/index.html b/Home-Kitchen/index.html new file mode 100644 index 00000000..732422f8 --- /dev/null +++ b/Home-Kitchen/index.html @@ -0,0 +1,55 @@ + + + + + + Flipkart Clone - Home & Kitchen + + + +
+ +
+ +
+
+

Home & Kitchen Essentials

+

Find everything you need for your home and kitchen at unbeatable prices.

+
+ +
+
+ Product 1 +

Product 1

+

$19.99

+ +
+
+ Product 2 +

Product 2

+

$29.99

+ +
+ +
+
+ + + + + + diff --git a/Home-Kitchen/script.js b/Home-Kitchen/script.js new file mode 100644 index 00000000..1e8f545a --- /dev/null +++ b/Home-Kitchen/script.js @@ -0,0 +1,32 @@ +// Initialize cart +let cart = []; + +// Function to update cart display +function updateCartDisplay() { + // For simplicity, just log cart items to console + console.log('Cart:', cart); +} + +// Function to handle add to cart button click +function handleAddToCart(event) { + // Ensure the button is clicked + if (event.target.tagName === 'BUTTON' && event.target.classList.contains('add-to-cart')) { + const productCard = event.target.closest('.product-card'); + const productId = productCard.getAttribute('data-product-id'); + const productName = productCard.querySelector('h3').textContent; + const productPrice = productCard.querySelector('p').textContent; + + // Add product to cart + const product = { + id: productId, + name: productName, + price: productPrice, + }; + + cart.push(product); + updateCartDisplay(); + } +} + +// Attach event listener to the document +document.addEventListener('click', handleAddToCart); diff --git a/Home-Kitchen/styles.css b/Home-Kitchen/styles.css new file mode 100644 index 00000000..4b4cacaf --- /dev/null +++ b/Home-Kitchen/styles.css @@ -0,0 +1,100 @@ +/* Reset some default styles */ +body, h1, h2, h3, p, ul, li { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; +} + +header { + background: #2874f0; + color: #fff; + padding: 10px 0; +} + +.nav-links { + list-style: none; + display: flex; + justify-content: center; +} + +.nav-links li { + margin: 0 15px; +} + +.nav-links a { + color: #fff; + text-decoration: none; + font-weight: bold; +} + +.hero { + text-align: center; + padding: 50px 0; + background: #f8f8f8; +} + +.hero h2 { + font-size: 2.5rem; + margin-bottom: 10px; +} + +.hero p { + font-size: 1.2rem; +} + +.product-grid { + display: flex; + flex-wrap: wrap; + justify-content: center; + padding: 20px; +} + +.product-card { + background: #fff; + border: 1px solid #ddd; + border-radius: 5px; + width: 200px; + margin: 15px; + text-align: center; + padding: 15px; +} + +.product-card img { + max-width: 100%; + height: auto; +} + +.product-card h3 { + font-size: 1.2rem; + margin: 10px 0; +} + +.product-card p { + font-size: 1rem; + color: #555; +} + +.product-card button { + background: #2874f0; + color: #fff; + border: none; + padding: 10px 15px; + border-radius: 5px; + cursor: pointer; +} + +.product-card button:hover { + background: #1a5bb8; +} + +footer { + background: #f8f8f8; + text-align: center; + padding: 10px; + border-top: 1px solid #ddd; +}