Scribd
Upload
6 views29 pages

mini

The document outlines the structure of a Plant Shop website, featuring a responsive design with a navigation bar, a carousel for showcasing products, and a shopping cart modal. It includes sections for product listings, an about us page, and various plant care resources. The site is built using HTML and Bootstrap for styling and layout, with interactive elements for user engagement.

Uploaded by

Pranav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views29 pages

mini

The document outlines the structure of a Plant Shop website, featuring a responsive design with a navigation bar, a carousel for showcasing products, and a shopping cart modal. It includes sections for product listings, an about us page, and various plant care resources. The site is built using HTML and Bootstrap for styling and layout, with interactive elements for user engagement.

Uploaded by

Pranav
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

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="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<link rel="stylesheet" href="style.css">

</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="https://thumbs.dreamstime.com/b/garden-shop-under-open-air-close-up-row-plants-
landscape-design-offered-sale-295498398.jpg" 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="https://fortheloveofgardeners.com/wp-content/uploads/2024/04/Easy-Indoor-Plants-Low-
Maintenance-Beauties-for-Any-Home-Featured.jpg" 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="https://cdn.shopify.com/s/files/1/0551/6489/files/PS_Gift_Guide_Image_2_1024x1024.png?v=16067416
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="p.jpg" 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="p2.jpg" 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="p5.jpg" 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="f.jpg" 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="ppp.jpeg" 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="spider-plant.jpg" 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="ccc.jpg" 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="ct.jpeg" 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="https://wallpapers.com/images/file/snake-plant-pictures-3489-x-3489-
bzlb3yvavgnxs0y6.jpg" 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="https://assets.bloomsflora.com/uploads/product-pics/13248_74_13248.webp"
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="ja.jpg" 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="mailto:[email protected]" class="btn btn-primary">Email Us</a>

</div>

</section>

<!-- Footer -->

<footer class="bg-dark text-white text-center py-3">

<p>&copy; 2025 Paudha | All Rights Reserved</p>

</footer>

<script>

let cart = JSON.parse(localStorage.getItem('cart')) || [];

function addToCart(name, price) {

cart.push({ name, price });

localStorage.setItem('cart', JSON.stringify(cart));

updateCartDisplay();

function updateCartDisplay() {

document.getElementById('cartCount').textContent = cart.length;

const cartItems = document.getElementById('cartItems');

cartItems.innerHTML = '';
let total = 0;

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

total += parseFloat(item.price);

const li = document.createElement('li');

li.className = 'list-group-item d-flex justify-content-between align-items-center';

li.innerHTML = `${item.name} - $${item.price} <button class='btn btn-danger btn-sm'


onclick='removeFromCart(${index})'>X</button>`;

cartItems.appendChild(li);

});

document.getElementById('cartTotal').textContent = total.toFixed(2);

function removeFromCart(index) {

cart.splice(index, 1);

localStorage.setItem('cart', JSON.stringify(cart));

updateCartDisplay();

function clearCart() {

cart = [];

localStorage.removeItem('cart');

updateCartDisplay();

function proceedToCheckout() {

// Check if cart has items

if (cart.length === 0) {

alert("Your cart is empty. Please add items before checkout.");

return;

// Hide cart section and show checkout section

document.getElementById('cartSection').classList.add('d-none');
document.getElementById('checkoutSection').classList.remove('d-none');

document.getElementById('cartButtons').classList.add('d-none');

document.getElementById('checkoutButtons').classList.remove('d-none');

// Display order summary in checkout

const orderSummary = document.getElementById('orderSummary');

orderSummary.innerHTML = '';

let total = 0;

cart.forEach(item => {

total += parseFloat(item.price);

const li = document.createElement('li');

li.className = 'list-group-item d-flex justify-content-between';

li.innerHTML = `<span>${item.name}</span><span>$${item.price}</span>`;

orderSummary.appendChild(li);

});

// Add total row

const totalLi = document.createElement('li');

totalLi.className = 'list-group-item d-flex justify-content-between font-weight-bold';

totalLi.innerHTML = `<span>Total</span><span>$${total.toFixed(2)}</span>`;

orderSummary.appendChild(totalLi);

function backToCart() {

// Show cart section and hide checkout section

document.getElementById('cartSection').classList.remove('d-none');

document.getElementById('checkoutSection').classList.add('d-none');

document.getElementById('cartButtons').classList.remove('d-none');

document.getElementById('checkoutButtons').classList.add('d-none');

function placeOrder() {
// Basic validation

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const address = document.getElementById('address').value;

const payment = document.getElementById('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: cart.reduce((sum, item) => sum + parseFloat(item.price), 0)

};

// For demo purposes - normally you'd send this to your backend

console.log("Order submitted:", orderData);

// Show order confirmation

document.getElementById('checkoutSection').classList.add('d-none');

document.getElementById('confirmationSection').classList.remove('d-none');

document.getElementById('checkoutButtons').classList.add('d-none');

document.getElementById('confirmationButtons').classList.remove('d-none');

document.getElementById('orderNumber').textContent = generateOrderNumber();
// Clear cart after successful order

clearCart();

function generateOrderNumber() {

// Generate a random order number for demo purposes

return 'PLT-' + Math.floor(Math.random() * 1000000).toString().padStart(6, '0');

function continueShopping() {

// Reset the view

document.getElementById('cartSection').classList.remove('d-none');

document.getElementById('checkoutSection').classList.add('d-none');

document.getElementById('confirmationSection').classList.add('d-none');

document.getElementById('cartButtons').classList.remove('d-none');

document.getElementById('checkoutButtons').classList.add('d-none');

document.getElementById('confirmationButtons').classList.add('d-none');

// Add event listeners

document.querySelectorAll('.btn-add-to-cart').forEach(button => {

button.addEventListener('click', (event) => {

const name = event.target.dataset.productName;

const price = parseFloat(event.target.dataset.productPrice);

addToCart(name, price);

});

});

document.getElementById('clearCart').addEventListener('click', clearCart);

document.getElementById('checkoutButton').addEventListener('click', proceedToCheckout);

document.getElementById('backToCart').addEventListener('click', backToCart);

document.getElementById('placeOrder').addEventListener('click', placeOrder);

document.getElementById('continueShopping').addEventListener('click', continueShopping);
window.onload = updateCartDisplay;

</script>

<!-- Bootstrap JS Bundle (includes Popper.js) -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></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 = process.env.PORT || 3000;

// Middleware

app.use(cors());
app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static(path.join(__dirname, 'public')));

// MongoDB Connection

mongoose.connect('mongodb://localhost:27017/plantShop', {

useNewUrlParser: true,

useUnifiedTopology: true

})

.then(() => console.log('Connected to MongoDB'))

.catch(err => console.error('Could not connect to MongoDB', err));

// Define Schemas

const userSchema = new mongoose.Schema({

name: { type: String, required: true },

email: { type: String, required: true, unique: true },

address: String,

createdAt: { type: Date, default: Date.now }

});

const productSchema = new mongoose.Schema({

name: { type: String, required: true },

price: { type: Number, required: true },

description: String,

imageUrl: String,

inStock: { type: Boolean, default: true }

});

const orderSchema = new mongoose.Schema({

user: {

name: { type: String, required: true },

email: { type: String, required: true },

address: { type: String, required: true }


},

items: [{

productId: { type: mongoose.Schema.Types.ObjectId, 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: Date.now }

});

// Create models

const User = mongoose.model('User', userSchema);

const Product = mongoose.model('Product', productSchema);

const Order = mongoose.model('Order', orderSchema);

// API Routes

// Get all products

app.get('/api/products', async (req, res) => {

try {

const products = await Product.find();

res.json(products);

} catch (error) {

res.status(500).json({ message: error.message });

});

// Get a single product

app.get('/api/products/:id', async (req, res) => {


try {

const product = await Product.findById(req.params.id);

if (!product) return res.status(404).json({ message: 'Product not found' });

res.json(product);

} catch (error) {

res.status(500).json({ message: error.message });

});

// Create a new order

app.post('/api/orders', async (req, res) => {

try {

// Generate order number

const orderNumber = 'PLT-' + Math.floor(Math.random() * 1000000).toString().padStart(6, '0');

const newOrder = new Order({

user: {

name: req.body.customer.name,

email: req.body.customer.email,

address: req.body.customer.address

},

items: req.body.items.map(item => ({

name: item.name,

price: item.price,

quantity: item.quantity || 1

})),

totalAmount: req.body.total,

paymentMethod: req.body.customer.payment,

orderNumber: orderNumber

});

const savedOrder = await newOrder.save();

res.status(201).json({
message: 'Order created successfully',

orderNumber: savedOrder.orderNumber,

orderId: savedOrder._id

});

} catch (error) {

res.status(400).json({ message: error.message });

});

// Get user's orders

app.get('/api/orders/user/:email', async (req, res) => {

try {

const orders = await Order.find({ 'user.email': req.params.email });

res.json(orders);

} catch (error) {

res.status(500).json({ message: error.message });

});

// Create a new user (for registration)

app.post('/api/users', async (req, res) => {

try {

// Check if user already exists

const existingUser = await User.findOne({ email: req.body.email });

if (existingUser) {

return res.status(400).json({ message: 'User already exists' });

const newUser = new User({

name: req.body.name,

email: req.body.email,

address: req.body.address

});
const savedUser = await newUser.save();

res.status(201).json(savedUser);

} catch (error) {

res.status(400).json({ message: error.message });

});

// Sample route to add initial products

app.post('/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: 'f.jpg' },

{ name: 'Peace Lily', price: 18.00, description: 'Elegant flowering plant', imageUrl: 'ppp.jpeg' },

{ name: 'Spider Plant', price: 14.00, description: 'Air-purifying plant', imageUrl: 'spider-plant.jpg' },

{ name: 'Cactus', price: 8.00, description: 'Low-maintenance desert plant', imageUrl: 'ccc.jpg' },

{ name: 'Bamboo Palm', price: 22.00, description: 'Tropical indoor palm', imageUrl: 'ct.jpeg' },

{ name: 'Snake plant', price: 20.00, description: 'Low-light tolerant succulent', imageUrl:
'https://wallpapers.com/images/file/snake-plant-pictures-3489-x-3489-bzlb3yvavgnxs0y6.jpg' },

{ name: 'Golden money plant', price: 15.00, description: 'Feng shui prosperity plant', imageUrl:
'https://assets.bloomsflora.com/uploads/product-pics/13248_74_13248.webp' },

{ name: 'Jade plant', price: 10.00, description: 'Succulent with round leaves', imageUrl: 'ja.jpg' }

];

// Clear existing products

await Product.deleteMany({});

// Insert sample products

const products = await Product.insertMany(sampleProducts);

res.status(201).json({

message: 'Sample products added successfully',

products

});
} catch (error) {

res.status(400).json({ message: error.message });

});

// Modify the front-end HTML file

app.get('/', (req, res) => {

res.sendFile(path.join(__dirname, 'public', 'index.html'));

});

// Start the server

app.listen(PORT, () => {

console.log(`Server is running on port ${PORT}`);

});

You might also like