Xavier’s first Front-End Project (HTML, CSS, Javascript)
By: Xavier Mcgriff
Tags: Web Development, Front End Development, Coding, Software Development, Codingbootcamp

In this article I will explain my thought process on how I decided to come up with my idea and move forward with execution. For my coding bootcamp our first front-end project main requirements were to find an API, use that API in our webpage, manipulate the DOM, and collect user input of some sort. Obviously these weren’t all of the requirements but these were key in completing this project everything else took a backseat compared to these. To begin my project I focused on functionality first with creating my entire search engine HTML through the DOM. Below is my HTML document that I used for my javascript. Not much HTML huh?

I wanted to give myself a challenge and only create my elements through the DOM. By doing this I learned so much more as far as DOM manipulation and how to create and delete elements as I pleased.

Before I started a line of code I spent a couple hours thinking and planning an idea on how I was going to utilize an API for my webpage. Honestly, I feel like that part was the hardest because I had so many to choose from, but some ideas were far more complex than the others. I decided to create my own online library where the user could either search a specific book, author, or a phrase and their results would pop up.

I started by creating a header, a main container for the search bar (input, button), and a second content container that housed the incoming results from the API. I noticed that without commenting and organizing my sections it got very easy to lose track of what was what. Writing down my thought process really helped things move very smoothly.

Above is my second container that will house incoming data.

Once I had all of my elements created on my search page it was time to create the logic and functionality. I used the GoogleBooks API that had no API key requirement.

I made sure to give my search button functionality before moving on to the function that would make everything possible.

variable for search button

function/event-listener for search button

finished and styled search bar

In order to use the API I needed to query the class of the input that I previously created. From there I created a variable for my API and interpolated my variable into my API url. To receive data I had to create an await/fetch variable “fetchBooks” and a json variable to interpret the information received “jsonBooks”. Once these variables were created I console logged the information to make sure that I had no errors.

Now that I had full functionality for my search and input through the console it was time to create a function to get my information visually on the page. I knew that I needed a for of loop to iterate through the data that I needed. Not only did the data I received provide entirely too much information. The data provided information that served my website no purpose.

In order to iterate through the information I needed a for of loop, create a variable, an element for that variable, and use dot notation along with index notation depending on where the information was located in the object or array of data.

To get the desired information on my page I appended the data to the HTML document that I created through the DOM.

Books successfully appending to my document.

Once I had complete full functionality while also crossing off major bullet points it was time to really get creative and utilize CSS, grid, and flex-box for my other pages.

For my home page I decided to keep it simple yet classy. All pages had the same navbar however each page had its own flavor or what the kids these days call… “The Sauce”.

Home page.

You cant see it here, but the “welcome to the basic library” has a very subtle slightly slow text animation greeting the user to the experience. All I really added to the page was an image, put the image in a container, added an overlay to the image, added the elements used to write over the image, and used certain flex properties to position the letters the way I wanted them to be.

Moving on to my third page (explore page) since my second page was the search engine page where the user could search for whatever title they wanted to see. This page showed a bit of my creative side. I wanted the user to feel at home or at least apart of the events the library promoted.

“Titles in the spotlight”

CSS animation on hover to really showcase the book/image in the spotlight.

I wanted the user to be drawn in to the titles being displayed. In order to position these the way I did I put all the images into a container, each image was placed into its own div once inside container, and I created a grid to my liking based on how many images were being displayed in the section. This section is the only section I used css animations on to add emphasis on the items.

“This weeks horrors”

This section of the explore page I wanted to showcase a certain genre of books that an online library would show. My last two sections, “Recommended reads” and “Children's corner” followed this same formula.

“Recommended Reads”

“Children's Corner”

Showcasing mobile responsiveness.

For my last page (About) I wanted to utilize a mix of css grid and flex-box. I used an image while putting that image into a container with flex while also inserting a text element with a slight css animation.

About page.

The top portion utilizes flex-box while the bottom portion of the layout (insight, our mission, our vision) utilize css grid with a total of six divs. I also had fun making this layout mobile responsive even though it was a requirement (lol).

About Page mobile responsive.

Media query code.

Alright, that about wraps up my front-end project. This project really allowed me to apply everything that we have learned so far during our coding bootcamp. Honestly, I feel great about this and i’m so proud at how the final product came out. I cant wait to work on more projects and continue to push myself past my limits. Until next time!