How can I modify the CSS code to display the author and title of a book when there is no image available from the Google Books API?
Currently, users see a custom image linked here, but it's not clear what it represents without the name and author information.
const extractThumbnail = ({ imageLinks }) => {
const DEFAULT_THUMBNAIL = "https://www.bindly.pl/static/images/logo.svg";
if (!imageLinks || !imageLinks.thumbnail) {
return DEFAULT_THUMBNAIL;
}
return imageLinks.thumbnail.replace("http://", "https://");};
Instead of return DEFAULT_THUMBNAIL;, I want to remove the image and apply the following CSS:
document.querySelector("div.book-info ").style.display = "inline-flex;";
document.querySelector("h3.book-title").style.fontsize = "32px";
However, these changes don't seem to be working...
Any suggestions? Here's the entire code snippet:
let bookContainer = document.querySelector(".search");
let searchBooks = document.getElementById("search-box");
const getBooks = async(book) => {
const response = await fetch(
`https://www.googleapis.com/books/v1/volumes?q=${book}&langRestrict=pl&printType=books`
);
const data = await response.json();
return data;
};
const extractThumbnail = ({ imageLinks }) => {
const DEFAULT_THUMBNAIL = "https://www.bindly.pl/static/images/logo.svg";
if (!imageLinks || !imageLinks.thumbnail) {
return DEFAULT_THUMBNAIL;
}
return imageLinks.thumbnail.replace("http://", "https://");
};
const drawChartBook = async(subject, startIndex = 0) => {
let cbookContainer = document.querySelector(`.${subject}`);
cbookContainer.innerHTML = `<div class='prompt'><div class="loader"></div></div>`;
const cdata = await getBooks(
`subject:${subject}&startIndex=${startIndex}&maxResults=3`
);
if (cdata.error) {
cbookContainer.innerHTML = `<div class='prompt'></div>`;
} else if (cdata.totalItems == 0) {
cbookContainer.innerHTML = `<div class='prompt'></div>`;
} else if (cdata.totalItems == undefined) {
cbookContainer.innerHTML = `<div class='prompt'>ツ Ups, chyba masz problem z internetem!</div>`;
} else if (!cdata.items || cdata.items.length == 0) {
cbookContainer.innerHTML = `<div class='prompt'>ツ Niestety, nie ma więcej wyników!</div>`;
} else {
cbookContainer.innerHTML = cdata.items;
cbookContainer.innerHTML = cdata.items
.map(
({ volumeInfo }) =>
`<div class='book' style='background: linear-gradient(` +
getRandomColor() +
`, rgba(0, 0, 0, 0));'><a href='https://www.bindly.pl/${volumeInfo.authors}/${volumeInfo.title}' target='_blank'><img class='thumbnail' src='` +
extractThumbnail(volumeInfo) +
`' alt='cover'></a><div class='book-info'><h3 class='book-title'><a href='https://www.bindly.pl/${volumeInfo.authors}/${volumeInfo.title}' target='_blank'>${volumeInfo.title}</a></h3><div class='book-authors' onclick='updateFilter(this,"author");'>${volumeInfo.authors}</div></div></div>`
)
.join("");
document.querySelector(".search-box").style.background = "#f00;";
}
};