Scribd
Upload
8 views11 pages

web_tech_lab-10_140 (1)

This document contains a web application code for a shopping cart using Express.js, including routes for managing products and a shopping cart. It features functionality to add, remove, and clear items from the cart, as well as a simple HTML interface to display products and the cart. The JavaScript code handles fetching products and cart data from the server and updating the UI accordingly.

Uploaded by

vansh sharma
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
8 views11 pages

web_tech_lab-10_140 (1)

This document contains a web application code for a shopping cart using Express.js, including routes for managing products and a shopping cart. It features functionality to add, remove, and clear items from the cart, as well as a simple HTML interface to display products and the cart. The JavaScript code handles fetching products and cart data from the server and updating the UI accordingly.

Uploaded by

vansh sharma
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/ 11

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]

You might also like