ASSIGNMENT NO: 14
Input-
Main:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant Shop</title>
<!-- Bootstrap CSS -->
<link href="[Link]
rel="stylesheet">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Paudha</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">Shop</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" id="cartButton" data-bs-toggle="modal" data-bs-
target="#cartModal">
Cart (<span id="cartCount">0</span>)
</a>
</li>
<!-- Dropdown for About -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-
toggle="dropdown" aria-expanded="false">About</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Plant care</a></li>
<li><a class="dropdown-item" href="#">Our team</a></li>
<li><a class="dropdown-item" href="#">Special Offers</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron Section (Carousel) -->
<header id="carouselExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="[Link]
[Link]" class="d-block w-100" alt="First Slide">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-4">Welcome to the Plant Shop</h1>
<p class="lead">Find your perfect plant companion today!</p>
<a href="#products" class="btn btn-primary btn-lg">Shop Now</a>
</div>
</div>
<div class="carousel-item">
<img src="[Link]
[Link]" class="d-block w-100" alt="Second Slide">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-4">Explore Our Variety</h1>
<p class="lead">We offer a wide range of plants for every home.</p>
<a href="#products" class="btn btn-primary btn-lg">Browse Plants</a>
</div>
</div>
<div class="carousel-item">
<img
src="[Link]
37" class="d-block w-100" alt="Third Slide">
<div class="carousel-caption d-none d-md-block">
<h1 class="display-4">Bring Nature Home</h1>
<p class="lead">Add some greenery to your space with our beautiful plants.</p>
<a href="#products" class="btn btn-primary btn-lg">Shop Now</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</header>
<!-- Cart Modal -->
<div class="modal fade" id="cartModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Shopping Cart</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<!-- Cart Items Section -->
<div id="cartSection">
<ul id="cartItems" class="list-group"></ul>
<p class="mt-3"><strong>Total: $<span id="cartTotal">0.00</span></strong></p>
</div>
<!-- Checkout Form Section (initially hidden) -->
<div id="checkoutSection" class="d-none">
<h4>Checkout</h4>
<form id="checkoutForm">
<div class="mb-3">
<label for="name" class="form-label">Full Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">Shipping Address</label>
<textarea class="form-control" id="address" name="address" rows="3" required></textarea>
</div>
<div class="mb-3">
<label for="payment" class="form-label">Payment Method</label>
<select class="form-select" id="payment" name="payment" required>
<option value="">Select payment method</option>
<option value="credit">Credit Card</option>
<option value="debit">Debit Card</option>
<option value="paypal">PayPal</option>
</select>
</div>
<h5 class="mt-4">Order Summary</h5>
<ul id="orderSummary" class="list-group mb-3"></ul>
</form>
</div>
<!-- Order Confirmation Section (initially hidden) -->
<div id="confirmationSection" class="d-none">
<div class="alert alert-success">
<h4>Thank you for your order!</h4>
<p>Your order number is: <strong id="orderNumber"></strong></p>
<p>We've sent a confirmation email with your order details.</p>
</div>
</div>
</div>
<div class="modal-footer">
<!-- Cart Buttons -->
<div id="cartButtons">
<button class="btn btn-danger" id="clearCart">Clear Cart</button>
<button class="btn btn-success" id="checkoutButton">Checkout</button>
</div>
<!-- Checkout Buttons (initially hidden) -->
<div id="checkoutButtons" class="d-none">
<button class="btn btn-secondary" id="backToCart">Back to Cart</button>
<button class="btn btn-primary" id="placeOrder">Place Order</button>
</div>
<!-- Confirmation Buttons (initially hidden) -->
<div id="confirmationButtons" class="d-none">
<button class="btn btn-primary" id="continueShopping" data-bs-dismiss="modal">Continue
Shopping</button>
</div>
</div>
</div>
</div>
</div>
<!-- Product Section -->
<section id="products" class="py-5">
<div class="container">
<h2 class="text-center mb-5">Innovation meets nature!</h2>
<div class="row mb-4">
<!-- Larger Product 1 -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img src="[Link]" class="card-img-top" alt="Plant 1">
<div class="card-body">
<h5 class="card-title">Plant Matchmaking</h5>
<p class="card-text">Discover your perfect plant! Our smart recommendations match you with
plants based on your lifestyle, home environment, and care preferences.</p>
<a href="#" class="btn btn-primary">Explore</a>
</div>
</div>
</div>
<!-- Larger Product 2 -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img src="[Link]" class="card-img-top" alt="Plant 2">
<div class="card-body">
<h5 class="card-title">Greenery at Your Doorstep</h5>
<p class="card-text">We bring nature to you with fast, safe delivery and plants carefully
packaged for freshness, ensuring they arrive healthy and vibrant.</p>
<a href="#" class="btn btn-primary">Explore</a>
</div>
</div>
</div>
<!-- Larger Product 3 -->
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img src="[Link]" class="card-img-top" alt="Plant 3">
<div class="card-body">
<h5 class="card-title">Interactive Plant Care Hub</h5>
<p class="card-text">Access a personalized plant care guide with tips, reminders, and
troubleshooting advice, all tailored to your plants' needs, ensuring they flourish!</p>
<a href="#" class="btn btn-primary">Explore</a>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Smaller Product 1 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]" class="card-img-top" alt="Plant 4">
<div class="card-body">
<h5 class="card-title">Ficcus plant</h5>
<p class="card-text">$12.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart" data-product-name="Ficcus plant" data-
product-price="12.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 2 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]" class="card-img-top" alt="Plant 5">
<div class="card-body">
<h5 class="card-title">Peace Lily</h5>
<p class="card-text">$18.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart" data-product-name="Peace Lily" data-
product-price="18.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 3 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]" class="card-img-top" alt="Plant 6">
<div class="card-body">
<h5 class="card-title">Spider Plant</h5>
<p class="card-text">$14.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart"
data-product-name="Spider plant" data-product-price="14.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 4 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]" class="card-img-top" alt="Plant 7">
<div class="card-body">
<h5 class="card-title">Cactus</h5>
<p class="card-text">$8.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart"
data-product-name="Cactus" data-product-price="8.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 5 -->
<div class="col-lg-3 col-md-6 col-sm-6 mb-4">
<div class="card">
<img src="[Link]" class="card-img-top" alt="Plant 8">
<div class="card-body">
<h5 class="card-title">Bamboo Palm</h5>
<p class="card-text">$22.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart"
data-product-name="Bamboo Palm" data-product-price="22.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 6 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]
[Link]" class="card-img-top" alt="Plant 7">
<div class="card-body">
<h5 class="card-title">Snake plant</h5>
<p class="card-text">$20.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart"
data-product-name="Snake plant" data-product-price="20.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 7 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]
class="card-img-top" alt="Plant 7">
<div class="card-body">
<h5 class="card-title">Golden money plant</h5>
<p class="card-text">$15.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart"
data-product-name="Golden money plant" data-product-price="15.00">Add to Cart</a>
</div>
</div>
</div>
<!-- Smaller Product 8 -->
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card">
<img src="[Link]" class="card-img-top" alt="Plant 7">
<div class="card-body">
<h5 class="card-title">Jade plant</h5>
<p class="card-text">$10.00</p>
<a href="#" class="btn btn-primary btn-add-to-cart"
data-product-name="Jade plant" data-product-price="10.00">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="bg-light py-5">
<div class="container text-center">
<h2 class="mb-4">About Us</h2>
<p>At Paudha, we believe in bringing nature into your home with a variety of plants to fit every need.
Whether you're a seasoned gardener or a beginner, we have the perfect plant for you!</p>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-5">
<div class="container text-center">
<h2 class="mb-4">Contact Us</h2>
<p>If you have any questions or inquiries, feel free to reach out to us!</p>
<a href="[Link] class="btn btn-primary">Email Us</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
<p>© 2025 Paudha | All Rights Reserved</p>
</footer>
<script>
let cart = [Link]([Link]('cart')) || [];
function addToCart(name, price) {
[Link]({ name, price });
[Link]('cart', [Link](cart));
updateCartDisplay();
function updateCartDisplay() {
[Link]('cartCount').textContent = [Link];
const cartItems = [Link]('cartItems');
[Link] = '';
let total = 0;
[Link]((item, index) => {
total += parseFloat([Link]);
const li = [Link]('li');
[Link] = 'list-group-item d-flex justify-content-between align-items-center';
[Link] = `${[Link]} - $${[Link]} <button class='btn btn-danger btn-sm'
onclick='removeFromCart(${index})'>X</button>`;
[Link](li);
});
[Link]('cartTotal').textContent = [Link](2);
function removeFromCart(index) {
[Link](index, 1);
[Link]('cart', [Link](cart));
updateCartDisplay();
function clearCart() {
cart = [];
[Link]('cart');
updateCartDisplay();
function proceedToCheckout() {
// Check if cart has items
if ([Link] === 0) {
alert("Your cart is empty. Please add items before checkout.");
return;
// Hide cart section and show checkout section
[Link]('cartSection').[Link]('d-none');
[Link]('checkoutSection').[Link]('d-none');
[Link]('cartButtons').[Link]('d-none');
[Link]('checkoutButtons').[Link]('d-none');
// Display order summary in checkout
const orderSummary = [Link]('orderSummary');
[Link] = '';
let total = 0;
[Link](item => {
total += parseFloat([Link]);
const li = [Link]('li');
[Link] = 'list-group-item d-flex justify-content-between';
[Link] = `<span>${[Link]}</span><span>$${[Link]}</span>`;
[Link](li);
});
// Add total row
const totalLi = [Link]('li');
[Link] = 'list-group-item d-flex justify-content-between font-weight-bold';
[Link] = `<span>Total</span><span>$${[Link](2)}</span>`;
[Link](totalLi);
function backToCart() {
// Show cart section and hide checkout section
[Link]('cartSection').[Link]('d-none');
[Link]('checkoutSection').[Link]('d-none');
[Link]('cartButtons').[Link]('d-none');
[Link]('checkoutButtons').[Link]('d-none');
function placeOrder() {
// Basic validation
const name = [Link]('name').value;
const email = [Link]('email').value;
const address = [Link]('address').value;
const payment = [Link]('payment').value;
if (!name || !email || !address || !payment) {
alert("Please fill in all required fields.");
return;
// Process the order (in a real application, you would send this to a server)
const orderData = {
customer: {
name: name,
email: email,
address: address,
payment: payment
},
items: cart,
total: [Link]((sum, item) => sum + parseFloat([Link]), 0)
};
// For demo purposes - normally you'd send this to your backend
[Link]("Order submitted:", orderData);
// Show order confirmation
[Link]('checkoutSection').[Link]('d-none');
[Link]('confirmationSection').[Link]('d-none');
[Link]('checkoutButtons').[Link]('d-none');
[Link]('confirmationButtons').[Link]('d-none');
[Link]('orderNumber').textContent = generateOrderNumber();
// Clear cart after successful order
clearCart();
function generateOrderNumber() {
// Generate a random order number for demo purposes
return 'PLT-' + [Link]([Link]() * 1000000).toString().padStart(6, '0');
function continueShopping() {
// Reset the view
[Link]('cartSection').[Link]('d-none');
[Link]('checkoutSection').[Link]('d-none');
[Link]('confirmationSection').[Link]('d-none');
[Link]('cartButtons').[Link]('d-none');
[Link]('checkoutButtons').[Link]('d-none');
[Link]('confirmationButtons').[Link]('d-none');
// Add event listeners
[Link]('.btn-add-to-cart').forEach(button => {
[Link]('click', (event) => {
const name = [Link];
const price = parseFloat([Link]);
addToCart(name, price);
});
});
[Link]('clearCart').addEventListener('click', clearCart);
[Link]('checkoutButton').addEventListener('click', proceedToCheckout);
[Link]('backToCart').addEventListener('click', backToCart);
[Link]('placeOrder').addEventListener('click', placeOrder);
[Link]('continueShopping').addEventListener('click', continueShopping);
[Link] = updateCartDisplay;
</script>
<!-- Bootstrap JS Bundle (includes [Link]) -->
<script src="[Link]
alpha1/dist/js/[Link]"></script>
</body>
</html>
CSS:
/* General body styles */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
/* Navbar customizations */
.navbar {
background-color: #012014;
.navbar .navbar-brand,
.navbar .nav-link {
color: #ecf0f1;
.navbar .nav-link:hover {
color: #5eeda8;
.dropdown-menu {
list-style: none;
position: absolute;
top: 100%;
left: 0;
background-color: #7d8575;
border-radius: 5px;
display: none;
z-index: 5;
.dropdown-menu li {
margin: 0;
.dropdown-menu a {
display:block;
padding: 10px 15px;
color: white;
/* Carousel (Jumbotron) styles */
#carouselExample .carousel-item {
height: 70vh; /* Adjust carousel height */
#carouselExample img {
object-fit: cover; /* Ensure images cover the entire carousel area */
height: 100%;
.carousel-caption {
bottom: 20%;
.carousel-caption h1 {
font-size: 3rem;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
.carousel-caption p {
font-size: 1.25rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
/* Featured Products Section */
#products .card {
border: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
#products .card:hover {
transform: scale(1.05);
/* About Section */
#about {
background-color: #f4f4f4;
color: #333;
#about p {
font-size: 1.1rem;
line-height: 1.8;
/* Contact Section */
#contact {
background-color: #2c3e50;
color: #ecf0f1;
#contact .btn-primary {
background-color: #3a769d;
border: none;
#contact .btn-primary:hover {
background-color: #a9dcff;
/* Footer */
footer {
background-color: #2c3e50;
footer p {
margin: 0;
font-size: 1rem;
/* Custom Button */
.btn-primary {
background-color: #27ae60;
border: none;
.btn-primary:hover {
background-color: #8adaac;
}
/* Card Styles */
.card {
border-radius: 10px;
overflow: hidden;
.card-img-top {
border-radius: 10px 10px 0 0;
/* Responsive Media Queries */
@media (max-width: 768px) {
.carousel-caption h1 {
font-size: 2.5rem;
.carousel-caption p {
font-size: 1rem;
Json file:
const express = require('express');
const mongoose = require('mongoose');
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('cors');
// Initialize express app
const app = express();
const PORT = [Link] || 3000;
// Middleware
[Link](cors());
[Link]([Link]());
[Link]([Link]({ extended: true }));
[Link]([Link]([Link](__dirname, 'public')));
// MongoDB Connection
[Link]('mongodb://localhost:27017/plantShop', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => [Link]('Connected to MongoDB'))
.catch(err => [Link]('Could not connect to MongoDB', err));
// Define Schemas
const userSchema = new [Link]({
name: { type: String, required: true },
email: { type: String, required: true, unique: true },
address: String,
createdAt: { type: Date, default: [Link] }
});
const productSchema = new [Link]({
name: { type: String, required: true },
price: { type: Number, required: true },
description: String,
imageUrl: String,
inStock: { type: Boolean, default: true }
});
const orderSchema = new [Link]({
user: {
name: { type: String, required: true },
email: { type: String, required: true },
address: { type: String, required: true }
},
items: [{
productId: { type: [Link], ref: 'Product' },
name: String,
price: Number,
quantity: { type: Number, default: 1 }
}],
totalAmount: Number,
paymentMethod: String,
orderNumber: { type: String, unique: true },
status: { type: String, default: 'Pending' },
createdAt: { type: Date, default: [Link] }
});
// Create models
const User = [Link]('User', userSchema);
const Product = [Link]('Product', productSchema);
const Order = [Link]('Order', orderSchema);
// API Routes
// Get all products
[Link]('/api/products', async (req, res) => {
try {
const products = await [Link]();
[Link](products);
} catch (error) {
[Link](500).json({ message: [Link] });
});
// Get a single product
[Link]('/api/products/:id', async (req, res) => {
try {
const product = await [Link]([Link]);
if (!product) return [Link](404).json({ message: 'Product not found' });
[Link](product);
} catch (error) {
[Link](500).json({ message: [Link] });
});
// Create a new order
[Link]('/api/orders', async (req, res) => {
try {
// Generate order number
const orderNumber = 'PLT-' + [Link]([Link]() * 1000000).toString().padStart(6, '0');
const newOrder = new Order({
user: {
name: [Link],
email: [Link],
address: [Link]
},
items: [Link](item => ({
name: [Link],
price: [Link],
quantity: [Link] || 1
})),
totalAmount: [Link],
paymentMethod: [Link],
orderNumber: orderNumber
});
const savedOrder = await [Link]();
[Link](201).json({
message: 'Order created successfully',
orderNumber: [Link],
orderId: savedOrder._id
});
} catch (error) {
[Link](400).json({ message: [Link] });
});
// Get user's orders
[Link]('/api/orders/user/:email', async (req, res) => {
try {
const orders = await [Link]({ '[Link]': [Link] });
[Link](orders);
} catch (error) {
[Link](500).json({ message: [Link] });
});
// Create a new user (for registration)
[Link]('/api/users', async (req, res) => {
try {
// Check if user already exists
const existingUser = await [Link]({ email: [Link] });
if (existingUser) {
return [Link](400).json({ message: 'User already exists' });
const newUser = new User({
name: [Link],
email: [Link],
address: [Link]
});
const savedUser = await [Link]();
[Link](201).json(savedUser);
} catch (error) {
[Link](400).json({ message: [Link] });
});
// Sample route to add initial products
[Link]('/api/seed-products', async (req, res) => {
try {
// Sample products from your HTML
const sampleProducts = [
{ name: 'Ficcus plant', price: 12.00, description: 'Beautiful indoor plant', imageUrl: '[Link]' },
{ name: 'Peace Lily', price: 18.00, description: 'Elegant flowering plant', imageUrl: '[Link]' },
{ name: 'Spider Plant', price: 14.00, description: 'Air-purifying plant', imageUrl: '[Link]' },
{ name: 'Cactus', price: 8.00, description: 'Low-maintenance desert plant', imageUrl: '[Link]' },
{ name: 'Bamboo Palm', price: 22.00, description: 'Tropical indoor palm', imageUrl: '[Link]' },
{ name: 'Snake plant', price: 20.00, description: 'Low-light tolerant succulent', imageUrl:
'[Link] },
{ name: 'Golden money plant', price: 15.00, description: 'Feng shui prosperity plant', imageUrl:
'[Link] },
{ name: 'Jade plant', price: 10.00, description: 'Succulent with round leaves', imageUrl: '[Link]' }
];
// Clear existing products
await [Link]({});
// Insert sample products
const products = await [Link](sampleProducts);
[Link](201).json({
message: 'Sample products added successfully',
products
});
} catch (error) {
[Link](400).json({ message: [Link] });
});
// Modify the front-end HTML file
[Link]('/', (req, res) => {
[Link]([Link](__dirname, 'public', '[Link]'));
});
// Start the server
[Link](PORT, () => {
[Link](`Server is running on port ${PORT}`);
});
