WEB TECH
Lab-10
Name: Rohan Mittal
Name :Samant saini Class: 5C
class:5c
roll no:2200290110140 Roll-no: 2200290110137
Code :
const express = require("express");
const session = require("express-session");
const bodyParser = require("body-parser");
const app = express();
const PORT = 3000;
// Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(session({
secret: "shopping-cart-secret",
resave: false,
saveUninitialized: true,
}));
// Sample products
const products = [
{ id: 1, name: "Laptop", price: 1000 },
{ id: 2, name: "Smartphone", price: 700 },
{ id: 3, name: "Headphones", price: 100 },
];
// Routes
app.get("/products", (req, res) => {
res.json(products);
});
// Add product to cart
app.post("/cart", (req, res) => {
const { productId } = req.body;
if (!req.session.cart) {
req.session.cart = [];
}
const product = products.find(p => p.id ===
productId);
if (product) {
req.session.cart.push(product);
}
res.json({ cart: req.session.cart });
});
// Get current cart
app.get("/cart", (req, res) => {
res.json({ cart: req.session.cart || [] });
});
// Remove item from cart
app.post("/cart/remove", (req, res) => {
const { productId } = req.body;
if (req.session.cart) {
req.session.cart = req.session.cart.filter(p => p.id !==
productId);
}
res.json({ cart: req.session.cart });
});
// Clear the cart
app.post("/cart/clear", (req, res) => {
req.session.cart = [];
res.json({ cart: req.session.cart });
});
app.listen(PORT, () => {
console.log(`Server is running on
http://localhost:${PORT}`);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Shopping Cart</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.product { margin: 10px 0; }
.cart { margin-top: 20px; }
.cart-item { margin: 5px 0; }
</style>
</head>
<body>
<h1>Shopping Cart</h1>
<h2>Available Products</h2>
<div id="products"></div>
<h2>Your Cart</h2>
<div id="cart"></div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1, h2 {
color: #333;
}
button {
padding: 5px 10px;
margin-left: 10px;
cursor: pointer;
}
.cart-item {
margin: 5px 0;
}
// Fetch and display products
function fetchProducts() {
fetch("http://localhost:3000/products")
.then(response => response.json())
.then(products => {
const productsDiv =
document.getElementById("products");
productsDiv.innerHTML = "";
products.forEach(product => {
const productDiv =
document.createElement("div");
productDiv.className = "product";
productDiv.innerHTML = `
<span>${product.name} -
$${product.price}</span>
<button onclick="addToCart(${product.id})">Add
to Cart</button>
`;
productsDiv.appendChild(productDiv);
});
});
}
// Add product to cart
function addToCart(productId) {
fetch("http://localhost:3000/cart", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ productId })
})
.then(response => response.json())
.then(() => fetchCart());
}
// Fetch and display the cart
function fetchCart() {
fetch("http://localhost:3000/cart")
.then(response => response.json())
.then(data => {
const cartDiv = document.getElementById("cart");
cartDiv.innerHTML = "";
data.cart.forEach(item => {
const cartItemDiv =
document.createElement("div");
cartItemDiv.className = "cart-item";
cartItemDiv.innerHTML = `
<span>${item.name} - $${item.price}</span>
<button
onclick="removeFromCart(${item.id})">Remove</butt
on>
`;
cartDiv.appendChild(cartItemDiv);
});
});
}
// Remove item from cart
function removeFromCart(productId) {
fetch("http://localhost:3000/cart/remove", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ productId })
})
.then(response => response.json())
.then(() => fetchCart());
}
// Clear the cart
function clearCart() {
fetch("http://localhost:3000/cart/clear", {
method: "POST",
})
.then(response => response.json())
.then(() => fetchCart());
}
// Initialize
fetchProducts();
fetchCart();
Output:
Your Cart:
Laptop - $1000 [Remove]
Smartphone - $700 [Remove]
Your Cart:
Smartphone - $700 [Remove]
