Video Presentation Link

My Site Responsibilities

I included the link to our teams Trello Board for this project so that you can look at what we worked on from the cards we completed. I was in charge of several aspects of the CloudShelf development. I did the JavaScript to do the fetch from the API. I did the JavaScript to load the header and footer. I did the JavaScript, CSS, and HTML to load the books onto individual book cards for each shelf. I did the shelf title. I did the remove button for the Library shelf book cards. I did the numbering system for the book cards on both the Library shelves and the Search results. I did the details button and the book modal pop-up. I did the additional search options to narrow a search. I did the buttons for advancing the results of a search by 40 and going back to the previous 40 results. I did the button that takes you back to the top of the search results. Finally, I did a lot of things along the way to help with the varying views of the site using CSS.

I did a ton of work on this website application, but I enjoyed the process of creating as I put what we learned into use. It was exciting to create something useful from what I learned.

Itemized CSS Features

A dark and light mode for our website that changes the view from light colors to dark colors.
The search bar uses a transition to expand and contract.
The buttons change color when you hover over them.
The navigation links change color and expand in size using a transition and transform when you hover over them.
The Details buttons, Next 40 Results, Past 40 Results, Back to the Top, and all of the Library book card buttons enlarge with a transition and transform to show that you clicked them.
The three shelf buttons change color and expand with a transform when you hover over them. They also stay a enlarged and a different color when you are on the corresponding shelf.
The numbers on the book cards use a transform rotate to rotate them 5 deg.
The hamburger menu for the small screen view uses transition and transform to rotate the menus position by 45 deg and change where it is displayed. It also uses display none as part of the process.
The book details modal pop-up uses display none, and position fixed to display and close it.

Problems I Faced & Resolved

The biggest problems that I faced and resolved had to do with figuring out how to make different features work for our site. My first obstacle was learning how to use the Google Book API. Once I read and researched how to use the site, I learned that I had several options of what we could do. If we had more time, there are even more cool things that we could have done.

The second obstacle that I faced had to do with making all of the big features work that I implemented on our site with JavaScript. As I would start with each complicated feature, I usually did not know exactly how I would be able to accomplish the end goal. My method for overcoming this obstacle was to decide what the first step that needed to happen was and then to make that happen. As I took the big problem apart one little step at a time I was able to reach the end goal with my JavaScript. It was always a great feeling to figure everything out in the end.

Use of the Coding Topics

Here is a list of topics that I used from the course on our final team project. This list is not all-inclusive.

Working With Groups

Managing the Modern Frontend Workflow

GIT

Object Oriented Programming

Properties

Methods

Module Bundler

The Window Object

LocalStorage

API's & Fetch API

Template Element

Testing & Debugging

Linting Tools

JSON

Forms

Async Functions

Higher-Order Functions

Transforms and Transitions

CloudShelf Description

CloudShelf is an application to search for books and then store books virtually on 3 shelves: Reading, Want to Read, and Read. It uses Google Books API as its data source. It also allows readers to track where they are at within a book with a tracking bar.

CloudShelf Home Page

When you go to CloudShelf you are taken to a Homepage that gives the user a brief decription and welcome to the site. At the top right there is a search bar in the header. Above the search bar there are four options for your search. The default search is all, which is a broad search. The other available search options narrow the search to title, author, or subject. There are also links in the header for the Home page, the Library page, and a light and dark mode for the site. Every page has this same header dynamically added. The Home Page has an additional link to the Library page on the left sie of the page.

CloudShelf Search Page

By design there is a search bar on every page. When a user enters a search it takes them to the Search Page. The Search Page displays 40 results for your search on book cards that are numbered according to their order in the search result. When the user gets to the bottom of the search results, there is a button to take you to the top of the page again. On the top right hand side above the first result card there is a button to display the next 40 search results. After advancing in the search, another button appears next to the advancing button to be able to go back to the previous results if desired. Finally, there is a button link to the Library page provided on the top left hand side above the first search result.

CloudShelf Library Page

The Library Page has three shelf buttons in the center of the page. Each button links to one of the shelves. Each shelf has the three shelf buttons at the top and then a title identifying the shelf and welcoming the user to the shelf. Below the title the number of books on the readers self is posted unless there are no books on the shelf. When there are no books on the shelf, it informs the user and invites them to add books to the shelf. If there are books the books are displayed on book cards below the indication of the amount of books on the shelf.

Search Results Cards

Aside from the information the Search Results book cards display, they each have four buttons. The first three buttons, Reading, Read, and Want to Read add the book to the corresponding shelf in the user's Library Page. The Details button opens up a modal pop-up that desplays much more detail about the book.

Search Results Cards

As with the Search Results book cards, each shelf book card has four buttons. These buttons are the same as the buttons for the Search Results book cards, except that one button replaces the button for adding to the shelf you are on with a delete button in its place.

Reading Progress Tracker

The book cards located in the Reading shelf and the Read shelf both have a progress tracker on their card as well. The reader can indicate where they are in their reading with this tracker bar. They are in the Read shelf in case the user has partially read a book and would like to keep track of that.