Question:CATOLOGUE PAGE: The catalogue page should contain the details of all the books available in the website in a table. The details should contain the following:
catalogue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalogue</title>
<style>
body {
background-color: #555555;
}
.book-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
h1 {
color: whitesmoke;
}
.book-image {
flex: 1;
padding: 10px;
}
.book-image img {
max-width: 100%;
height: auto;
max-height: 150px;
}
.book-details {
flex: 2;
padding: 10px;
}
.book-details h3 {
font-size: 18px;
margin: 0;
color: whitesmoke;
}
.book-details p {
font-size: 14px;
margin: 0;
color: whitesmoke;
}
.book-price {
flex: 1;
padding: 10px;
text-align: center;
}
.book-price p {
font-size: 14px;
margin: 0;
color: whitesmoke;
}
.add-to-cart {
flex: 1;
padding: 10px;
text-align: center;
}
.add-to-cart button {
background: linear-gradient(90deg, #853fe1, #CCE0FF);
color: whitesmoke;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.add-to-cart button:hover {
background: linear-gradient(90deg, #8b61c1, #b7c4d7);
color: #fff;
}
a {
color: aqua;
}
</style>
</head>
<body>
<center>
<h1>CSE Catalogue</h1>
</center>
<div class="book-container">
<div class="book-image">
<img src="https://coollagers.com/bookimage/Cabsolutebeginnersguid.jpg" alt="Book Image">
</div>
<div class="book-details">
<h3>C Programming Absolute Beginner's Guide</h3>
<p>Author: Perry and Miller<br>Year: 2013</p>
</div>
<div class="book-price">
<p>Price: $19.99</p>
</div>
<div class="add-to-cart">
<button onclick="addToCart('C Programming Absolute Beginners Guide', 19.99)">Add to Cart</button>
</div>
</div>
<div class="book-container">
<div class="book-image">
<img src="https://coollagers.com/bookimage/pythoncrookbook.jpg" alt="Book Image">
</div>
<div class="book-details">
<h3>Python Cookbook</h3>
<p>Author: David Beazley and Brian K. Jones
<br>Year: 2013</p>
</div>
<div class="book-price">
<p>Price: $21.00</p>
</div>
<div class="add-to-cart">
<button onclick="addToCart('Python Cookbook', 21.00)">Add to Cart</button>
</div>
</div>
<div class="book-container">
<div class="book-image">
<img src="https://coollagers.com/bookimage/jsdefinative.jpg" alt="Book Image">
</div>
<div class="book-details">
<h3>JavaScript: The Definitive Guide</h3>
<p>Author: David Flanagan<br>
Year: 2011</p>
</div>
<div class="book-price">
<p>Price: $20.99</p>
</div>
<div class="add-to-cart">
<button onclick="addToCart('JavaScript: The Definitive Guide', 20.99)">Add to Cart</button>
</div>
</div>
<div class="book-container">
<div class="book-image">
<img src="https://coollagers.com/bookimage/Think%20Java.jpg" alt="Book Image">
</div>
<div class="book-details">
<h3>Think Java</h3>
<p>Author: Allen B. Downey and Chris Mayfield<br>
Year: 2016</p>
</div>
<div class="book-price">
<p>Price: $30.99</p>
</div>
<div class="add-to-cart">
<button onclick="addToCart('Think Java', 30.99)">Add to Cart</button>
</div>
</div>
<div>
<a href="cart.html">View Shopping Cart</a>
</div>
<script>
function addToCart(title, price) {
console.log('Adding to cart:', { title, price });
let cart = JSON.parse(localStorage.getItem('cart')) || [];
let total = parseFloat(localStorage.getItem('total')) || 0;
const existingBookIndex = cart.findIndex(item => item.title === title);
if (existingBookIndex !== -1) {
cart[existingBookIndex].quantity += 1;
cart[existingBookIndex].amount += price;
} else {
cart.push({ title, price, quantity: 1, amount: price });
}
total += price;
localStorage.setItem('cart', JSON.stringify(cart));
localStorage.setItem('total', total.toFixed(2));
updateCart();
}
function updateCart() {
}
</script>
</body>
</html>
