I am finishing phase 1 of the Flatiron Software Developer Flex Program. The main focus of my phase 1 project was a page that could be utilized in a barn manager app used by boarding facilities.

I have decided to add two separate search bars. First I went into HTML and added 2 forms -
I start off with my horse search bar first because I want to know I can fetch the API with the least amount of variables. If I were to try to construct the fetch requests at the same time with a solid knowledge base, I would run into multiple contradicting errors between the two. Running one at a time allows all our focus to be where it needs to be.

Next I go to script.js to construct the GET request and add my event listener to monitor the submit button with the search bar. My event listener will use getElementById() in order to correctly identify which form I want to be transferring data to. In this case it is “horse-form”.

I have labeled it as form1 as I know I will be using a second form and I name my function that will house my GET request with the action it will be tasked with.

The searchHorse function I thought would be easy but I ran into my first set of issues relatively quick. This function allows for the user to search through the JSON data. When using fetch in this manner

fetch(http://localhost:3000/horses?name=${searchHorseValue}

Remember to use backticks as opposed to commas or quotations, the backticks allow for a ${search} to be used.

Once the fetch method finds the data, we need to display it on the frontend. This begins in the GET request but is in a separate function. Our GET request has our searchHorse function end with the function “displaySingleHorse”. displaySingleHorse is a small function that grabs the correct form for the info to load into, and grabs the info for what has been searched. It is simple yet one seemingly minor mistake will have you chasing invisible errors in your code. This is why it is ideal to finish one search bar at a time as opposed to trying to complete both at once ( which I have tried to save time, not a good idea).

function displaySingleHorse(horseData) {
const singleHorse = document.getElementById("horse-results");
singleHorse.innerHTML = <p>Name: ${horseData.name}</p><p>Breed: ${horseData.breed}</p><p>Color: ${horseData.color}</p><img src="${horseData.URL}"></img><p>Awards: ${horseData.awards}
}

One error I had trouble fixing with being new to GET requests was displaying an image when the GET request is carried out. As you can see in the function above, I put the ${horseData.URL} in tags. This was the root of some frustration due to not receiving an error when trying to use the search bar. It displayed all the correct data except for the image. After lots of googling and reading through Stackoverflow, I was able to remedy the mistake.
You would think the pictures were displaying with no problem now right? Wrong, It was showing the URL data but not as an image, it was showing a small image that I am unable to describe but it looked like a picture that was trying to load but was unable to. This next mistake was more of a process to find the correct way to add the photos. I originally saved them to my google drive and copied the link and added that to the db.json. Unfortunately this was before the <img tag errors so I only believed the incorrect tag and missing src attribute was all that needed to be fixed. Now after a lot more googling and asking a software developer who has completed the flatiron bootcamp and been working as a developer for the past 4-5 years, I was informed I would need to add the image files into the project folder and copy the relative path from the images into the db.json URL data. Luckily, I had assistance from an established developer. There is not telling how much longer this error could have had me problem solving.

As you can see on the left hand side, the images are now in the project folder.
The first search bar was to search for horses being boarded at the facility and the second search bar allowed the user to search for the different trainers at the facility. Knowing what I knew after completing the first search bar, the second was very easy to get set up.
Remember, the devil is in the details. I have never found this statement to be more applicable than when learning to code.