diff --git a/README.md b/README.md index a9a4cc6..c0c934b 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,14 @@ ### Goal: Display data returned from an api -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +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. + +Find the live demo at https://ishelvirakeira.github.io/simple-api-bootcamp/ + +simple book api + + +Tools used: HTML, CSS, JavaScript, Google Books API + +I solidified my understanding of the difference between innerText and innerHTML for text and links, got more practive with the select dropdown. + diff --git a/index.html b/index.html new file mode 100644 index 0000000..670287e --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + Simple Book API + + + + +

Find Academic Books

+ + + + + +

Title

+

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