CODE FOR UTENSILS AND KITCHEN KITS ORDERING HTML CSS AND JAVASCRIPT CODE ► MacroNepal

<!DOCTYPE html>

<head>

<title>Complete E-Commerce Website</title>

<style>

/* Basic styles for layout */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f4;

}

header {

background-color: #333;

color: #fff;

padding: 10px 0;

text-align: center;

}

header .logo {

font-size: 24px;

font-weight: bold;

}

nav ul {

list-style-type: none;

padding: 0;

}

nav ul li {

display: inline;

margin-right: 10px;

}

nav ul li a {

color: #fff;

text-decoration: none;

}

section {

padding: 20px;

margin: 10px;

}

/* Product grid styling */

.product-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

}

.product-card {

background-color: #fff;

padding: 10px;

text-align: center;

border: 1px solid #ddd;

}

.product-card img {

width: 100%;

height: auto;

}

/* Animations */

.animated-section {

animation: fadeIn 1s ease-in-out;

}

.animated-btn {

background-color: #333;

color: #fff;

padding: 10px 20px;

border: none;

cursor: pointer;

}

.animated-btn:hover {

background-color: #555;

}

@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

/* Cart styling */

#cart-items {

margin-top: 20px;

}

.cart-item {

margin-bottom: 10px;

}

</style>

</head>

<body>

<!– Header and Navigation –>

<div class=”logo”>KitchenStore</div>

<nav>

<ul>

<li><a href=”#products”>Products</a></li>

<li><a href=”#contact”>Contact Us</a></li>

<li><a href=”#login”>Login</a></li>

</ul>

</nav>

</header>

<!– Home Section –>

<h1>Welcome to KitchenStore</h1>

<p>Your one-stop shop for all kitchen essentials!</p>

</section>

<!– Products Section –>

<h2>Our Products</h2>

<!– List of 50 Product Cards –>

<h3>Stainless Steel Cookware Set</h3>

</div>

<h3>Non-Stick Frying Pan</h3>

</div>

<h3>Glass Measuring Cup</h3>

</div>

<h3>Ceramic Mixing Bowl Set</h3>

</div>

<h3>Wooden Cutting Board</h3>

</div>

<h3>Electric Kettle</h3>

</div>

<h3>Cast Iron Skillet</h3>

</div>

<h3>Stainless Steel Knife Set</h3>

</div>

<h3>Blender</h3>

</div>

<h3>Electric Rice Cooker</h3>

</div>

<h3>Stainless Steel Tongs</h3>

</div>

<h3>Digital Kitchen Scale</h3>

</div>

<h3>Garlic Press</h3>

</div>

<h3>Stainless Steel Colander</h3>

</div>

<h3>Glass Storage Jar Set</h3>

</div>

<h3>Microwave Oven</h3>

</div>

<h3>Spice Rack</h3>

</div>

<h3>Slow Cooker</h3>

</div>

<h3>Utensil Organizer</h3>

</div>

<h3>Electric Griddle</h3>

</div>

<h3>Silicone Baking Mat</h3>

</div>

<h3>Potato Masher</h3>

</div>

<h3>Electric Hand Mixer</h3>

</div>

<h3>Glass Baking Dish Set</h3>

</div>

<h3>Ceramic Teapot</h3>

</div>

<h3>Whisk</h3>

</div>

<h3>Coffee Maker</h3>

</div>

<h3>Pizza Cutter</h3>

</div>

<h3>Salad Spinner</h3>

</div>

<h3>Electric Wok</h3>

</div>

<h3>Silicone Spatula Set</h3>

</div>

<h3>Kitchen Shears</h3>

</div>

<h3>Glass Measuring Spoons</h3>

</div>

<h3>Oil Dispenser</h3>

</div>

<h3>Electric Deep Fryer</h3>

</div>

<h3>Microwave-Safe Bowl Set</h3>

</div>

<h3>Grill Pan</h3>

</div>

<h3>Rolling Pin</h3>

</div>

<h3>Stainless Steel Grater</h3>

</div>

<h3>Rice Strainer</h3>

</div>

<h3>Kitchen Apron</h3>

</div>

<h3>Oven Mitts</h3>

</div>

<h3>Stainless Steel Strainer</h3>

</div>

<h3>Juicer</h3>

</div>

<h3>Steamer Pot</h3>

</div>

<h3>Cutting Board Set</h3>

</div>

</section>

<!– Add more sections like above for different categories (Cart, Checkout, etc.) –>

<!– The rest of the JavaScript and other necessary code will go here. –>

// JavaScript code for the e-commerce website functionality

const cart = [];

function updateCart() {

const cartItems = document.getElementById(‘cart-items’);

cartItems.innerHTML = ”; // Clear existing items

let total = 0;

cart.forEach((item, index) => {

const product = products.find(p => p.id === item.id);

total += product.price * item.quantity;

const li = document.createElement(‘li’);

li.textContent = `${product.name} (NPR ${product.price}) x ${item.quantity}`;

cartItems.appendChild(li);

});

document.getElementById(‘total’).textContent = `Total: NPR ${total}`;

}

function addToCart(productId) {

const productInCart = cart.find(item => item.id === productId);

if (productInCart) {

productInCart.quantity += 1;

} else {

cart.push({ id: productId, quantity: 1 });

}

updateCart();

}

const products = [

{ id: 1, name: ‘Stainless Steel Pan’, price: 1500 },

{ id: 2, name: ‘Non-Stick Frying Pan’, price: 1800 },

{ id: 3, name: ‘Pressure Cooker’, price: 3000 },

{ id: 4, name: ‘Blender’, price: 2500 },

{ id: 5, name: ‘Knife Set’, price: 2000 },

{ id: 6, name: ‘Microwave Oven’, price: 12000 },

{ id: 7, name: ‘Toaster’, price: 3500 },

{ id: 8, name: ‘Rice Cooker’, price: 5000 },

{ id: 9, name: ‘Electric Kettle’, price: 2200 },

{ id: 10, name: ‘Cutting Board’, price: 800 },

{ id: 11, name: ‘Cooking Utensils Set’, price: 2500 },

{ id: 12, name: ‘Dish Rack’, price: 1200 },

{ id: 13, name: ‘Measuring Cups’, price: 600 },

{ id: 14, name: ‘Mixing Bowl Set’, price: 2000 },

{ id: 15, name: ‘Food Processor’, price: 8000 },

{ id: 16, name: ‘Stand Mixer’, price: 10000 },

{ id: 17, name: ‘Spice Rack’, price: 1800 },

{ id: 18, name: ‘Slow Cooker’, price: 4000 },

{ id: 19, name: ‘Utensil Organizer’, price: 1500 },

{ id: 20, name: ‘Electric Griddle’, price: 3200 },

{ id: 21, name: ‘Silicone Baking Mat’, price: 700 },

{ id: 22, name: ‘Potato Masher’, price: 400 },

{ id: 23, name: ‘Electric Hand Mixer’, price: 2500 },

{ id: 24, name: ‘Glass Baking Dish Set’, price: 1800 },

{ id: 25, name: ‘Ceramic Teapot’, price: 1200 },

{ id: 26, name: ‘Whisk’, price: 300 },

{ id: 27, name: ‘Coffee Maker’, price: 6000 },

{ id: 28, name: ‘Pizza Cutter’, price: 500 },

{ id: 29, name: ‘Salad Spinner’, price: 1000 },

{ id: 30, name: ‘Electric Wok’, price: 3500 },

{ id: 31, name: ‘Silicone Spatula Set’, price: 800 },

{ id: 32, name: ‘Kitchen Shears’, price: 600 },

{ id: 33, name: ‘Glass Measuring Spoons’, price: 700 },

{ id: 34, name: ‘Oil Dispenser’, price: 400 },

{ id: 35, name: ‘Electric Deep Fryer’, price: 5000 },

{ id: 36, name: ‘Microwave-Safe Bowl Set’, price: 2000 },

{ id: 37, name: ‘Grill Pan’, price: 2500 },

{ id: 38, name: ‘Rolling Pin’, price: 400 },

{ id: 39, name: ‘Stainless Steel Grater’, price: 600 },

{ id: 40, name: ‘Rice Strainer’, price: 300 },

{ id: 41, name: ‘Kitchen Apron’, price: 700 },

{ id: 42, name: ‘Oven Mitts’, price: 500 },

{ id: 43, name: ‘Stainless Steel Strainer’, price: 300 },

{ id: 44, name: ‘Juicer’, price: 4500 },

{ id: 45, name: ‘Steamer Pot’, price: 3500 },

{ id: 46, name: ‘Cutting Board Set’, price: 1500 }

];

document.querySelectorAll(‘.add-to-cart’).forEach(button => {

button.addEventListener(‘click’, () => {

const productId = parseInt(button.getAttribute(‘data-product-id’));

addToCart(productId);

});

</script>

</body>

</html>

Leave a Reply Cancel reply