Resilient-Labs · ishelvirakeira · Oct 6, 2025 · Oct 6, 2025 · Oct 28, 2025
diff --git 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/
+
+<img width="668" height="426" alt="simple book api" src="https://github.com/user-attachments/assets/a1605565-fa1c-4969-aa52-68cf017c3e48" />
+
+
+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
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang = "en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Simple Book API</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+
+        <h1>Find Academic Books</h1>
+
+        <label for="authorSelect">Choose an author:</label><!--got these authors' names from the JSON data-->
+        <select id="authorsel">
+            <option value="">Select an author</option>
+            <option value="Glenn P.Lauzon">Glenn P.Lauzon</option>
+            <option value="Debbie Nathan">Debbie Nathan</option>
+            <option value="Michael Snedeker">Michael Snedeker</option>
+            <option value="Kip Lornell">Kip Lornell</option>
+            <option value="Keira V. Williams">Keira V. Williams</option>
+            <option value="Levi Heywood Memorial Library, Gardner, Mass">Levi Heywood Memorial Library, Gardner, Mass</option>
+            <option value="Steven Rosales">Steven Rosales</option>
+            <option value="Barry Hankins">Barry Hankins</option>
+            <option value="Thaddeus Holt">Thaddeus Holt</option>
+        </select>
+        <button type="button" name="button">Get Book</button>
+
+        <h2>Title</h2>
+        <p>Description: <div class="description"></div></p>
+        <div class="title"></div>
+
+
+        <script type="text/javascript" src="main.js"></script>
+
+    </body>
+
+</html>
diff --git a/main.js 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 <a href="' +pdfLink+ '">here</a>'; 
+            } else{
+               document.querySelector('.title').innerText = 'PDF is not available'
+
+            }
+        })
+
+
+        .catch(err => {
+           console.log(`error ${err}`);
+           document.querySelector('h2').innerText = 'Something went wrong.'
+
+        })
+
+}
diff --git a/style.css 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;
+    }
+}