Description:
+ + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..7156066 --- /dev/null +++ b/main.js @@ -0,0 +1,84 @@ +//Enable your user to enter the author's name and get book information + +// listen for click, call the api +//get author's names from user + +//got assistance from Karim. He also helped me debug the code + + +document.querySelector('button').addEventListener('click', getBook) +//show book info in the DOM +function getBook() { + const author = document.querySelector('#authorsel').value; + + console.log(author); + //console.log(encodeURIComponent(author); + // stop if user didn’t select anything + if (!author) { + alert('Please select an author!') + return + } + + const url = 'https://www.googleapis.com/books/v1/volumes?q=inauthor:' + encodeURIComponent(author)//allowing the browser to read spaces in its way the user is gonna include + + fetch(url) + .then(res => res.json()) + .then(data => { + console.log(data.items, data.items.length); + + if (!data.items || data.items.length === 0) { + document.querySelector('h2').innerText = 'No results'; + document.querySelector('title').innerText = '' + return; + } + document.querySelector('h2').innerText = 'Untitled'; + const volumeInfo = data.items[0].volumeInfo; + const title1 = data.items[0].volumeInfo.title; + + + if (volumeInfo && title1) { + document.querySelector('h2').innerText = title1; + } + + const description=data.items[0].volumeInfo.description; + if(volumeInfo && description){ + document.querySelector('.description').innerText = description; + } + + //check if pdf is available + let pdfAv = false; + let pdfLink = ''; + const accessInfo = data.items[0].accessInfo; + console.log('accesInfo ', accessInfo) + if (accessInfo) { + + if (data.items[0].accessInfo.pdf) { + if (data.items[0].accessInfo.pdf.isAvailable) { + pdfAv = true; + if (data.items[0].accessInfo.webReaderLink) { + pdfLink = data.items[0].accessInfo.webReaderLink; + } + } + } + } + console.log(pdfLink) + if(!pdfAv && volumeInfo && volumeInfo.infoLink){ + pdfLink = volumeInfo.infoLink; + } + + if(pdfAv && pdfLink){ + document.querySelector('.title').innerHTML = 'PDF is available here'; + } else{ + document.querySelector('.title').innerText = 'PDF is not available' + + } + }) + + + .catch(err => { + console.log(`error ${err}`); + document.querySelector('h2').innerText = 'Something went wrong.' + + }) + +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1fdec50 --- /dev/null +++ b/style.css @@ -0,0 +1,94 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + margin: 0; + padding: 20px; + background-color: rgb(234, 230, 230); +} +p{ + font-weight: 600; + color: rgb(26, 88, 26) +} + +h1 { + color: rgb(52, 50, 50); + margin-bottom: 20px; +} + +label { + font-weight: bold; +} + +select, button { + padding: 10px; + margin: 10px 0; + font-size: 16px; + border-radius: 5px; + border: 1px solid rgb(220, 213, 213); +} + +button { + background-color: green; + color: white; + cursor: pointer; + +} + +button:hover { + background-color: rgb(57, 146, 57); +} + +h2 { + color: rgb(77, 75, 75); + margin-top: 20px; +} + +.description, .title { + max-width: 600px; + margin: 10px auto; + padding: 10px; + text-align: center; + background-color: white; + border-radius: 5px; + +} + +a { + color: rgb(18, 80, 18); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} +.title{ + margin-bottom: 50px; +} +/* Responsive Design */ +@media screen and (max-width: 768px) { + body { + padding: 15px; + } + + select, button { + width: 80%; + font-size: 14px; + } + + .description, .title { + width: 90%; + font-size: 14px; + } +} + +@media screen and (max-width: 480px) { + select, button { + width: 100%; + font-size: 14px; + } + + .description, .title { + width: 100%; + font-size: 13px; + } +} \ No newline at end of file From b9793581fe252d5b2e46b1655a85f7413ea0e273 Mon Sep 17 00:00:00 2001 From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com> Date: Mon, 6 Oct 2025 03:37:31 -0400 Subject: [PATCH 2/3] Update README.md --- README.md | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index a9a4cc6..c7035fd 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,11 @@ ### Goal: Display data returned from an api -### How to submit your code for review: +This book API project allows a user to select an author from a dropdown and fetch information about their academic books using the Google Books API. When the user selects an author and clicks the button, the browser retrieves the first book from the API response, displays its title and description in the DOM, and checks whether a PDF version is available, providing a link if it exists. +