HTML program to create a website for online sales of kirana store products :
Here's an updated version of the HTML, CSS, and JavaScript code with additional functionality:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kirana Store Online</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#cart">Cart</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h1>Welcome to Kirana Store Online!</h1>
<p>Get your daily essentials delivered right to your doorstep!</p>
<button>Shop Now!</button>
</section>
<section id="products">
<h1>Our Products</h1>
<div class="product-grid">
<!-- Product cards will be generated dynamically -->
</div>
</section>
<section id="about">
<h1>About Us</h1>
<p>We are a local kirana store committed to delivering quality products to our customers.</p>
</section>
<section id="contact">
<h1>Contact Us</h1>
<p>Phone: 01234-567890</p>
<p>Email: <a href="mailto:info@kiranaonline.com">info@kiranaonline.com</a></p>
</section>
<section id="cart">
<h1>Cart</h1>
<div id="cart-items"></div>
<p id="cart-total"></p>
<button id="checkout-button">Checkout</button>
</section>
</main>
<footer>
<p>© 2023 Kirana Store Online</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS (in styles.css file)
```
/* ... existing styles ... */
#cart-items {
margin-bottom: 20px;
}
#cart-total {
font-weight: bold;
font-size: 18px;
margin-bottom: 10px;
}
#checkout-button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#checkout-button:hover {
background-color: #555;
}
JavaScript (in script.js file)
// Product data
const products = [
{ id: 1, name: 'Product 1', price: 100 },
{ id: 2, name: 'Product 2', price: 200 },
{ id: 3, name: 'Product 3', price: 300 },
// Add more products here
];
// Cart data
let cart = [];
// Function to generate product cards
function generateProductCards() {
const productGrid = document.querySelector('.product-grid');
productGrid.innerHTML = '';
products.forEach(product => {
const productCard = document.createElement('div');
productCard.classList.add('product-card');
productCard.innerHTML = `
<img src="product${product.id}.jpg" alt="${product.name}">
<h2>${product.name}</h2>
<p>₹${product.price}</p>
<button>Add to Cart</button>
`;
productGrid.appendChild(productCard);
});
}
// Function to add product to cart
function addProductToCart(productId) {
const product = products.find(product => product.id === productId);
if (product) {
cart.push(product);
updateCart();
}
}
// Function to update cart
function updateCart() {
const cartItems = document.querySelector('#cart-items');
cartItems.innerHTML = '';
cart.forEach(product => {
const cartItem = document.createElement('div');
cartItem.innerHTML = `
<h2>${product.name}</h2>
<p>₹${product.price}</p>
<button>Remove from Cart</button>
`;
cartItems.appendChild(cartItem);
});
const cartTotal = document.querySelector('#cart-total');
const total = cart.reduce((acc, product) => acc + product.price, 0);
cartTotal.textContent = `₹${total}`;
}
// Function to checkout
function checkout() {
// Implement
// Function to checkout
function checkout() {
// Implement checkout logic here
alert("Checkout successful!");
cart = [];
updateCart();
}
// Event listeners
document.addEventListener("DOMContentLoaded", function () {
generateProductCards();
});
const productCards = document.querySelectorAll(".product-card");
productCards.forEach((productCard) => {
const addButton = productCard.querySelector("button");
addButton.addEventListener("click", function () {
const productId = parseInt(productCard.querySelector("img").alt.match(/\d+/)[0]);
addProductToCart(productId);
});
});
const checkoutButton = document.querySelector("#checkout-button");
checkoutButton.addEventListener("click", function () {
checkout();
});
const cartItems = document.querySelector("#cart-items");
cartItems.addEventListener("click", function (event) {
if (event.target.tagName === "BUTTON") {
const productId = parseInt(event.target.parentNode.querySelector("h2").textContent.match(/\d+/)[0]);
cart = cart.filter((product) => product.id !== productId);
updateCart();
}
});
This code adds the following functionality:
1. Product card generation:
The `generateProductCards` function generates product cards based on the `products` array.
2. Add to cart functionality:
The `addProductToCart` function adds a product to the cart when the "Add to Cart" button is clicked.
3. Cart updates:
The `updateCart` function updates the cart display when a product is added or removed.
4. Checkout functionality:
The `checkout` function simulates a checkout process when the "Checkout" button is clicked.
5. Event listeners:
The code adds event listeners to the product cards, cart items, and checkout button to handle user interactions.
Note that this is a basic implementation, and you may want to add more features, such as:
- User authentication and authorization
- Payment gateway integration
- Order management and tracking
- Product reviews and ratings
- Search and filtering functionality
