Untitled

 avatar
unknown
plain_text
2 years ago
1.6 kB
2
Indexable
<!DOCTYPE html>
<html>
<head>
    <title>eBook Store</title>
    <!-- Add necessary CSS and JavaScript files -->
</head>
<body>
    <header>
        <h1>Welcome to the eBook Store!</h1>
        <!-- Add navigation links here -->
    </header>

    <main>
        <section id="books">
            <!-- Display a list of available books -->
        </section>
    </main>

    <footer>
        <p>&copy; 2023 eBook Store. All rights reserved.</p>
    </footer>
</body>
</html>
// Sample data for books (replace with your actual data)
const books = [
    { title: "Book 1", author: "Author 1", price: 9.99 },
    { title: "Book 2", author: "Author 2", price: 14.99 },
    { title: "Book 3", author: "Author 3", price: 19.99 }
];

// Function to display books
function displayBooks() {
    const booksSection = document.getElementById("books");
    booksSection.innerHTML = "";

    books.forEach((book) => {
        const bookDiv = document.createElement("div");
        bookDiv.innerHTML = `
            <h3>${book.title}</h3>
            <p>Author: ${book.author}</p>
            <p>Price: $${book.price}</p>
            <button onclick="addToCart('${book.title}')">Add to Cart</button>
        `;
        booksSection.appendChild(bookDiv);
    });
}

// Function to add a book to the cart
function addToCart(bookTitle) {
    // Implement the logic to add the book to the cart
    // You can use JavaScript objects or a server-side database for this
    console.log(`Added '${bookTitle}' to the cart.`);
}

// Call the displayBooks function to populate the books section
displayBooks();