Scribd
Upload
4 views4 pages

Cart

Uploaded by

himanshukhare450
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
4 views4 pages

Cart

Uploaded by

himanshukhare450
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/ 4

Cart Page

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart</title>
<link rel="stylesheet" href="cart-style.css">
</head>
<body>
<div class="container">
<h1>Your Cart</h1>
<div id="cart-item" class="cart-item">
<!-- Book information will be dynamically injected here -->
</div>
<button class="checkout-btn">Checkout</button>
</div>

<script>
// Book data
const books = {
'quantum Physics': {
img: 'https://media.springernature.com/full/springer-static/cover-hires/book/
978-3-031-23717-1',
price: '$15.99'
},
'C programming: {
img: 'https://media.springernature.com/full/springer-static/cover-hires/book/
978-1-4842-5725-8',
price: '$20.99'
},
'DS & algo': {
img: 'https://5.imimg.com/data5/SELLER/Default/2022/3/WZ/EL/NM/147304712/
whatsapp-image-2022-02-20-at-5-05-41-pm.jpeg',
price: '$12.99'
}
};

// Retrieve the book title from localStorage


const bookTitle = localStorage.getItem('book');
const cartItemDiv = document.getElementById('cart-item');

// Display the selected book's details


if (bookTitle && books[bookTitle]) {
cartItemDiv.innerHTML = `
<img src="${books[bookTitle].img}" alt="${bookTitle}">
<h3>${bookTitle}</h3>
<p>Price: ${books[bookTitle].price}</p>
`;
} else {
cartItemDiv.textContent = 'Your cart is empty.';
}
</script>
</body>
</html>
style.css
/* General reset and body styling for cart page */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
padding: 20px;
}

/* Cart Container Styling */


.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
margin-bottom: 20px;
font-size: 2em;
color: #333;
}

/* Cart Item Styling */


.cart-item {
display: ex;
ex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.cart-item img {
width: 120px;
height: 180px;
object- t: cover;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}

.cart-item h3 {
margin: 10px 0;
color: #333;
font-size: 1.5em;
}

.cart-item p {
color: #555;
font-size: 1.2em;
fl
fi
fl
}

/* Checkout Button Styling */


.checkout-btn {
background-color: #007b ;
color: white;
border: none;
padding: 15px 25px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
display: block;
margin: 0 auto;
}

.checkout-btn:hover {
background-color: #0056b3;
}

/* Responsive Design for Cart Page */


@media (max-width: 600px) {
h1 {
font-size: 1.5em;
}

.cart-item img {
width: 90px;
height: 135px;
}

.checkout-btn {
padding: 10px 20px;
font-size: 16px;
}
}

Add Script.js le to Catalogue page


function addToCart(bookTitle) {
// Store the book title in localStorage to simulate adding to the cart
localStorage.setItem('book', bookTitle);

// Redirect to the cart page


window.location.href = 'cart.html';
}
fi
ff

You might also like