script.js

// Fetch sample book data from Open Library API
document.addEventListener('DOMContentLoaded', function() {
    fetch('https://openlibrary.org/subjects/fiction.json?limit=10')
        .then(response => response.json())
        .then(data => {
            const featuredBooksContainer = document.getElementById('featured-books');
            
            data.works.forEach(work => {
                const bookId = work.key.split('/').pop();
                const coverUrl = `https://covers.openlibrary.org/b/id/${work.cover_id}-M.jpg`;
                
                const bookCard = document.createElement('div');
                bookCard.className = 'book-card bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow';
                bookCard.innerHTML = `
                    <div class="relative pb-[150%] overflow-hidden">
                        <img src="${coverUrl || 'http://static.photos/education/320x240/1'}" 
                             alt="${work.title}" 
                             class="absolute h-full w-full object-cover">
                    </div>
                    <div class="p-4">
                        <h3 class="font-medium text-gray-800 mb-1 truncate">${work.title}</h3>
                        <p class="text-sm text-gray-500 mb-3">${work.authors?.[0]?.name || 'Unknown Author'}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-xs px-2 py-1 bg-primary bg-opacity-10 text-primary rounded">${work.subject?.[0] || 'Fiction'}</span>
                            <a href="#" class="text-primary text-sm font-medium flex items-center">
                                Download <i data-feather="download" class="ml-1 w-4 h-4"></i>
                            </a>
                        </div>
                    </div>
                `;
                
                featuredBooksContainer.appendChild(bookCard);
            });
            
            feather.replace();
        })
        .catch(error => {
            console.error('Error fetching books:', error);
        });
});