Merge pull request #25 from ndoppler/author-search

Author search
ndoppler · Jun 12, 2024 · 1bdd6a0 · 1bdd6a0
2 parents b02d4ef + fba4144
commit 1bdd6a0
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 14 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,7 +1,16 @@
-.input {
-    max-width: 50%;
+.field.is-grouped {
+    display: flex;
+    gap: .75rem;
+    justify-content: center;
 }
 
+#authorSearchResults {
+    display: flex;
+    justify-content: center;
+    margin: 0 auto;
+    flex-direction: column;
+    align-items: center;
+}
 
 .card {
     background-color: #a1cfdd;
@@ -14,4 +23,4 @@
     justify-content: space-evenly;
     margin: 10px;
     padding: 10px;
-}
+}
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -262,4 +262,75 @@ function getApi() {
         });
 };
 
-searchButton.addEventListener("click", getApi);
+searchButton.addEventListener("click", getApi);
+
+
+async function searchByAuthor(authorName) {
+    const searchUrl = `https://openlibrary.org/search/authors.json?q=${encodeURIComponent(authorName)}`;
+
+    try {
+        const response = await fetch(searchUrl);
+        const data = await response.json();
+
+        if (data.numFound > 0) {
+            const authors = data.docs.slice(0, 5).map(author => ({
+                key: author.key,
+                name: author.name,
+                top_work: author.top_work,
+            }));
+            return authors;
+        } else {
+            return [];
+        }
+    } catch (error) {
+        return [];
+    }
+}
+
+async function fetchAuthorWorks(authorKey, limit = 5) {
+    const worksUrl = `https://openlibrary.org/authors/${authorKey}/works.json?limit=${limit}`;
+
+    try {
+        const response = await fetch(worksUrl);
+        const data = await response.json();
+
+        if (data.entries && data.entries.length > 0) {
+            const works = data.entries.map(work => ({
+                title: work.title,
+                key: work.key,
+            }));
+            return works;
+        } else {
+            return [];
+        }
+    } catch (error) {
+        return [];
+    }
+}
+
+document.getElementById('searchButton').addEventListener('click', async () => {
+    const searchInput = document.getElementById('searchInput').value;
+    const searchType = document.getElementById('searchType').value;
+    const authorResultsContainer = document.getElementById('authorSearchResults');
+
+    if (searchType.toLowerCase() === 'author') {
+        const authors = await searchByAuthor(searchInput);
+        if (authors.length > 0) {
+            const authorKey = authors[0].key;
+            const works = await fetchAuthorWorks(authorKey, 5);
+
+            if (works.length > 0) {
+                authorResultsContainer.textContent = "Top Works"
+                works.forEach(work => {
+                    const workElement = document.createElement('div');
+                    workElement.textContent = `${work.title}`;
+                    authorResultsContainer.appendChild(workElement);
+                });
+            } else {
+                authorResultsContainer.textContent = "No works found";
+            }
+        } else {
+            authorResultsContainer.textContent = "No authors found";
+        }
+    }
+});
diff --git a/index.html b/index.html
@@ -3,27 +3,35 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="">
     <title>Perfect Ambient Generator</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
     <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
     <header class="container mgb-small">
-        <h1 class="is-size-1">Perfect Ambient Generator</h1>
+        <h1 class="title is-size-1 has-text-centered">Perfect Ambient Generator</h1>
     </header>
     <div class="container">
-        <input class="input" type="text" placeholder="Search for a Book" id="searchInput"/>
-        <div class="select">
-            <select>
-            <option id="author">Author</option>
-            <option id="title">Title</option>
-            </select>
+        <div class="field is-grouped">
+            <div class="control">
+                <input class="input" type="text" placeholder="Search for a Book" id="searchInput"/>
+            </div>
+            <div class="control">
+                <div class="select">
+                    <select id="searchType">
+                        <option id="author">Author</option>
+                        <option id="title">Title</option>
+                    </select>
+                </div>
+            </div>
+            <div class="control">
+                <button class="button is-info" id="searchButton" type="button">Submit</button>
+            </div>
         </div>
-        <button class="button is-info" id="searchButton" type="button">Submit</button>
     </div>
-    <div id="bookResults"></div>
+    <div id="authorSearchResults"></div>
     <div id="subjectResults"></div>
+    <div id="bookResults"></div>
     <section id="spotifySection" class="section">
         <div id="spotifyResults" class="container"></div>
         <div id="topFourResults" class="columns"></div>