Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BUG: Home and Kitchen Page Not Found 404 Error #1527

Merged
merged 1 commit into from
Aug 4, 2024
Merged

BUG: Home and Kitchen Page Not Found 404 Error #1527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions Home-Kitchen/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipkart Clone - Home & Kitchen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>Flipkart Clone</h1>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Home & Kitchen</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section class="hero">
<h2>Home & Kitchen Essentials</h2>
<p>Find everything you need for your home and kitchen at unbeatable prices.</p>
</section>

<section class="product-grid">
<div class="product-card" data-product-id="1">
<img src="path/to/image1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>$19.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<div class="product-card" data-product-id="2">
<img src="path/to/image2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>$29.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
<!-- Add more product cards as needed -->
</section>
</main>

<footer>
<p>&copy; 2024 Flipkart Clone. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
32 changes: 32 additions & 0 deletions Home-Kitchen/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
100 changes: 100 additions & 0 deletions Home-Kitchen/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading