Some changes

index.css

@@ -43,7 +43,7 @@ h6 {
 }
 
 a {
-  color: var(--primary);
+  color: var(--background);
 }
 nav {
   position: fixed;

scripts/component/Loading.js

@@ -4,10 +4,10 @@ export default function Loading(loading) {
     const mainEl = document.querySelector("main");
     if (loading){
         loaderEl.style.display = "block";
-        searchEl.style.display = "none";
+        // searchEl.style.display = "none";
     }else {
         loaderEl.style.display = "none";
-        searchEl.style.display = "block";
+        // searchEl.style.display = "block";
     }
 
 }

scripts/display-book-info.js

@@ -91,7 +91,7 @@ export default function displayBookInfo(passedData) {
 
   moreInfoButton.classList.add("more-info");
   moreInfoButton.innerHTML = '<div class="svg-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></div><span class="text">More Info</span>';
-  moreInfoButton.onclick = () => alert("More Info");
+  moreInfoButton.onclick = () => window.open(data.volumeInfo.previewLink, "_blank");
   buttonContainer.appendChild(favoriteButton);
   buttonContainer.appendChild(moreInfoButton);
 
@@ -120,7 +120,8 @@ export default function displayBookInfo(passedData) {
           : "N/A"
       } <br />
       <b>Publisher: </b>${data.volumeInfo.publisher || "No publisher"} <br />
-      <b>Book:</b> ${data.volumeInfo.pageCount || "No page count"} <br />
+      
+      <b>Book:</b> ${data.volumeInfo.pageCount ? data.volumeInfo.pageCount + " pages" : "No page count"} <br />
     `;
 
   bookContent.appendChild(titleContainer);

scripts/validate-isbn.js

@@ -2,6 +2,7 @@
 import displayBook from "./display-book.js";
 import showSearch from "./showSearch.js";
 import Loading from "./component/Loading.js";
+import Announce from "./component/Announce.js";
 
 //variables
 const input = document.querySelector("#input");
@@ -146,7 +147,14 @@ async function fetchBook(url) {
     .then((response) => response.json())
     .then(async (data) => {
       if (!data.items) {
-        relatedEl.innerHTML = "no books found";
+        // relatedEl.innerHTML = "no books found";
+        // matchedEl.innerHTML = "no books found";
+        const searchEl = document.getElementById("search-result");
+        searchEl.style.display = "none";
+
+        Announce("no books found but the inputted isbn is valid");
+        Loading(false)
+        openDetailEl()
         return console.error("no data");
       }
       showSearch(false)

styles/announcer.css

@@ -13,24 +13,24 @@
 .announcer p{
     background-color: aliceblue;
     padding: .5rem;
-    animation: fadeInUp 5s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
+    animation: fadeInUp 5s cubic-bezier(0, 1, 0.58, 1) forwards;
 }
 
 
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
-        height: 0;
+        /* height: 0; */
     }
     50% {
         opacity: 1;
-        height: auto;
+        /* height: auto; */
     }
     to {
         opacity: 0;
         transform: translateY(0);
-        height: 0;
+        /* height: 0; */
     }
 }
 

styles/header.css

@@ -31,9 +31,13 @@ header{
     gap: 1rem;
 }
 summary::marker{
-    color: var(--accent);
+    color: var(--background);
 
 }
+mark{
+  padding: .5rem 1rem;
+  background-color: var(--secondary);
+}
 
 details[open]{
     background-color: rgba(255, 255, 255, 0.301);

styles/main.css

@@ -39,7 +39,9 @@ main {
   min-height: 100vh;
 }
 .search-result h2 {
-  margin: 2rem;
+
+  margin-bottom: 2rem;
+  margin-top: 5rem;
 }
 #matched-book {
   background-color: var(--text);
@@ -50,6 +52,7 @@ main {
   color: var(--text);
   padding-bottom: 1rem;
 }
+
 #matched-book,
 #related-book {
   /* min-height: 30%; */