The book nook

Explore the world of books with The Book Nook!

HTML5

JavaScript

CSS

Project Overview:

My goal for this project was to seriously push myself. I wanted to take everything I had learned from this semester in NMIX4020 (Advanced Web Development) and make something I was proud of. I wanted to challenge myself by focusing on API usage because it can be overwhelming to look at, and I wanted to use this project to get more comfortable with it. In the previous semester in NMIX4030 Native App Development, I created the Book Nook App, so for this project, I took on the challenge of creating it into a website with more advanced features. To do this, I utilized Visual Studio Code and a combination of HTML, Javascript, CSS, and the Google Books API.

The problem:

I made this website because I love to read, and there are a lot of books in the world. I wanted to have a website where others and I could have the opportunity to explore those books. I think so many good books are left unread because the options are too overwhelming. The Book Nook allows users to narrow those options by searching up specific genres and browsing through new releases and best sellers. I also made this website because The Book Nook app was one of my favorite ideas in Native App Development, and I wanted to continue that idea onto a website platform.

Challenges i faced:

To be completely honest, I ran into a lot of challenges while creating The Book Nook. At the beginning of this process, I had a hard time envisioning how to go about creating exactly what I wanted. As I began to attempt to incorporate API into my program, I realized that I had a lot to learn. First and foremost, I realized rather fast that I needed my own API key. However, Google Books API began to complicate things when I received an error message telling me I had exceeded my quota usage (this was excruciatingly frustrating at the time).

Once I worked around that, I started progressing more. Slowly but surely, I got the hang of things in the API realm, and my challenges minimized to formatting, structure, and visual complications. I had never created multiple pages on a website before or used API connected to a search bar, nor had I used API to take the user to an outside link (the Google Play Store, in this case), so everything became a learning curve. I spent a lot of time and energy working around these challenges, but I am thankful for them because I have truly learned so much from this project.

Screenshot of a portion of Google Books API

The solution:

The main way I solved most of my issues was by researching and learning about API. I looked at numerous tutorials, past notes from the class, and past exercises. Part of finally learning how to do what I envisioned involved trial and error as well. My ‘Explore’ page and my ‘Search’ page are practically similar aside from incorporating the search button and locating the genreURL from what was inputted, so once I figured out the formatting and the logistics of the code involving API, it became way easier to manage. I played around with color schemes, background images, and borders to achieve the look I wanted. I made each link to another page a button that is showcased in the header to mimic a real website as well. It all started to come together, and I got to have some fun playing around with the looks of it more.

Portion of code connected to API and a preview of my ‘Explore New Releases’ page

The homepage includes the header with links back to the home page, the explore page, and a page where you can contact me. Beneath the header is a section I incorporated as a way to break up the page and welcome the user to The Book Nook. I wanted to make it visually appealing, so I linked an image of colorful book spines and based the rest of my website’s color scheme on it. Beneath the welcome title is a button that relocates the user to the same explore page linked in the header.

The ‘About’ section is brief, but I mainly included it as fluff above the search bar. The search bar takes any book genre inputted by the user and displays a series of books related to that genre on a new page. If no genre is inputted and the user presses the ‘Search’ button, they will be prompted to type in a genre. Below the search bar is a horizontal scroll displaying current best-selling books. Above each book is their rating out of 5 stars, and below each book is a link that redirects the user to GooglePlay.com, where they can purchase that book. If there is no link provided by Google Books API, then “Not for Sale on GooglePlay” is displayed.

Top and bottom half of The Book Nook homepage

As I mentioned previously when the user presses the ‘Explore’ button in the header or the ‘Explore’ button in the welcome section, they will be redirected to a page filled with newly released books. Below is an example of what the very top of the page looks like. If the user scrolls, they will be able to view many more books along with a description of each book, the author’s name, its average rating (1–5), and a link to purchase the book. On this page, the user still has the option to utilize the links in the header as well.

Below is a breakdown of my code involving API for the explore page above.

const bookList = document.getElementById('books');
const apiUrl = `https://www.googleapis.com/books/v1/volumes?q=adult+fiction+new+release&orderBy=relevance&maxResults=30&key=;

I first created bookList as the main const that will be linked to all the data collected and displayed in the body under id=”books.” I also went ahead and linked the Google Books API link for the newly released adult fiction novels.

fetch(apiUrl)
   .then(response => response.json())
   .then(data => {
       const books = data.items;
        books.forEach(book => {

I then created a fetch for that Google Books API link in order to draw in the data from JSON and assign an array of books to the variable ‘books.’ The forEach loop sorts through the array data and pulls the specified components listed below that I wanted to display about the books.

const bookInfo = document.createElement('div');
      bookInfo.classList.add('book');

      //title info retrieved to display title
      const title = document.createElement('h3');
      title.textContent = book.volumeInfo.title;
      title.classList.add('title');

       //description info retrieved to display description
       const description = document.createElement('p');
       description.textContent = book.volumeInfo.description;
       description.classList.add('description');

        //image link retrieved to display book cover
        const bookImage = document.createElement('img');
        bookImage.src = book.volumeInfo.imageLinks?.thumbnail;
                
        //buy link retrieved to display link to be redirected to googleplay page to purchase
        const buy = document.createElement('a');
        //if the book is not for sale on googleplay then link will not be given
        if (book.saleInfo.saleability != "NOT_FOR_SALE") {
          buy.href = book.saleInfo.buyLink;
          buy.target = '_blank';
          buy.textContent = 'Click to Buy';
          buy.classList.add('buy');
        }
        else {
          buy.textContent = 'Not for Sale on GooglePlay';
          buy.classList.add('buy')
        }

        //rating info retrieved to display rating...using getStarRating() function to display #/5 as stars
        const rating = document.createElement('div');
        rating.innerHTML = "Rating: " + getStarRating(book.volumeInfo.averageRating);
        rating.classList.add('rating');

        //author info retrieved to display author
        const author = document.createElement('p');
        author.innerHTML = "Author: " + book.volumeInfo.authors;
        author.classList.add('author');

I created constants for the title, description, book cover photo, purchase link, rating, and the author’s name. I called each specific piece of data from the Google Books API that I wanted to display by, for example, writing title.textContent = book.volumeInfo.title;

This tells the code connected to the previous fetch() snippet where to extract data from and sort through the long lists each book has.

I used the classList.add() function for almost every variable because I found it made it easier to use CSS on each of them. I don’t know if this is necessary since I also wrote const ‘ ’ = document.createElement(‘ ‘); but I found that it worked and just stuck with it. The classList.add() function just adds new classes that you specify, in this case, the ‘books’ element shown in the first code snippet above.

//buy link retrieved to display link to be redirected to googleplay page to purchase
        const buy = document.createElement('a');
        //if the book is not for sale on googleplay then link will not be given
        if (book.saleInfo.saleability != "NOT_FOR_SALE") {
          buy.href = book.saleInfo.buyLink;
          buy.target = '_blank';
          buy.textContent = 'Click to Buy';
          buy.classList.add('buy');
        }
        else {
          buy.textContent = 'Not for Sale on GooglePlay';
          buy.classList.add('buy')
        }

For the buy constant, I ran into some trouble before creating the if-else statement because a link would appear for books that are not currently sold on the Google Play store, and I was getting redirected to a blank page. So, in order to prevent this, I made sure that the “Saleability:” did not say “NOT_FOR_SALE” before proceeding to attach the link. If not, then “Not for Sale on Google Play” is displayed so the user understands why they cannot click to buy like the other books.

With much of this stuff, I was learning on the way, but buy.target = ‘_blank’; was especially new to me. This allows the page connected to the link to open up in a new tab!

bookInfo.appendChild(title);
     bookInfo.appendChild(bookImage);
     bookInfo.appendChild(author);
     bookInfo.appendChild(description);
     bookInfo.appendChild(buy);
     bookInfo.appendChild(rating);

     bookList.appendChild(bookInfo);
});

Above, I simply appended every const and its data I just handled all back to bookInfo, which acts like a collector of all the data in this case in this case because then bookInfo is appended to bookList, the original const I made in the first snippet of code that connects everything to the element ‘books’.

To spice things up a bit, I wanted to figure out how to make the basic numerical rating for each book given by Google Books appear as 1 out of 5 stars rating. To do this, I created a function that takes the data from ‘rating’ and first identifies it to be a true positive number. If there is no rating or an invalid rating, only blank stars will appear. If the rating is legit, then the number is rounded down to the nearest whole number (if it has a decimal) and is stored as ‘fullStars.’ That number is subtracted from 5 and stored as ‘emptyStars.’ From there, both constants are combined to create ‘stars, ' which appear on the page.

When the user types in a genre of their choosing, they will be redirected to a page that looks identical to the ‘Explore’ page. The difference is on this page, all of the books are specifically categorized under whatever genre they searched (below is an example of my search for fiction novels).

A screenshot of ‘Fiction’ is typed into the search bar, and then the first book that is pulled up after hitting the search

Lastly, the ‘Contact Me!’ page is a section of my website that was not necessarily needed but was easy to make and is handy to have in case anyone interested in my work wants to learn more about me. I included a photo of myself, a little bit about my education, and a brief overview of the site. I also included links to my portfolio, LinkedIn, and to my email!

Overview of my ‘Contact Me!’ page

Results:

I love how my website turned out, and I really am proud of all the work and learning I put into it. I faced a lot of challenges that I had to be patient with, but the end result was worth it. I have a better understanding of API and how to utilize it more efficiently. I also have a better grasp on how to layout websites more aesthetically compared to previous work I’ve done, where many of the sections are messily placed everywhere. I’d definitely say I am a hands-on learner, so sitting down and learning the ins and outs of how to make this work significantly helped me! In the future, I would love to expand this website more and add favorites and wish-list sections to it that hold user data for each individual user. I also think it would be cool to let users add their own reviews on the books (similar to GoodReads)! Regardless, I am very satisfied with the end result of The Book Nook and can’t wait to continue learning.