This week we completed our first project, combining js, css and html to build a website that pulls from an API. I worked with Josiah on this project.
Our first task was to find a good API to use. We wanted to find something with a solid dataset, was stable (we had heard that other students in the past had had problems with their API being down when they had to present), and preferably an API that contained image links. We found an iTunes API that checked all those boxes, so we decided to use that.
Using the iTunes API we figured we could make a website that would allow you to search the API using different criteria and then allow you to either rate or favorite each song. However as soon as we sat down to start our build we realized that the iTunes API required you to apply for it, so that was our first major roadblock.
Luckily we were quickly able to find a new, open API, a list of breweries, that we could easily adapt to our original wireframe. However, while reading the documentation we realized the API only returned 50 results at a time, which was an issue. This we quickly resolved by simply creating a local json file with all the data from the API, which they conveniently had on a GitHub page.
Anyways on to the code!
Our first challenge was to create a search that would look at three different fields and return results combining all three. We put our heads together and created a way to do that by iterating over all the breweries using .forEach and using an if statement that returned TRUE if all the inputted values either matched that brewery or were blank. So a search with all values blank returns all breweries.
if((stateSelect.value === item.state || stateSelect.value === `Select State`) && (typeSelect.value.toLowerCase() === item.brewery_type || typeSelect.value === `Select Type`) && (item.name.toLowerCase().includes(nameSearch.value.toLowerCase()) || nameSearch.value === ``))
We were pretty proud that we were able to successfully create this line filled with logic and have it work on our first try!
Our biggest challenge came not in the functionality of the website built via our js code but instead from making the site look decent using the .css. Both my partner and I struggled in trying to add different classes to our elements to make them appear as we wanted. In particular we found it extremely difficult to get elements to appear where we wanted on the page, without them overlapping with other elements, for example. It seemed like we were just playing a guessing game by trying different things in the .css file and seeing if it changed anything on the page. It was very frustrating that it seemed like most of the time whatever we changed didn't actually affect anything. I'm hoping we will learn some tools in the future that make all this easier.
I actually ended up coding some things into the js file that I probably would've been better off doing in the .css file put I just couldn't figure out how to do. In particular, to add a page break between the input elements in my edit form to edit the brewery I created a 'br' element and then appended it to every element that I wanted a page break after. I found, however, that the 'br' element I created was only being appended to whatever the last element that I appended it to in the js. After some research I found that you can use '.cloneNode()' to prevent this from happening.
var br = document.createElement("br")
h5.append("Name: ", nameEdit)
h5.appendChild(br.cloneNode())
h5.append("City: ", cityEdit)
h5.appendChild(br.cloneNode())
h5.append("State: ", stateEdit)
h5.appendChild(br.cloneNode())
h5.append("Type: ", typeEdit)
h5.appendChild(br.cloneNode())
h5.append("Address: ", streetEdit, ad2Edit, ad3Edit)
h5.appendChild(br.cloneNode())
h5.append("Website: ", urlEdit)
h5.appendChild(br.cloneNode())
h5.append(submitEdit)
h5.append(deleteBtn)
This had the intended result of giving me my page break, but I get the feeling there is a cleaner way to do this in the .css using class names.
Another challenge we encountered had nothing to do with code, but was simply using GitHub to manage our different branches. This is definitely something I look forward to learning more about as it seems like this will be very important to have a solid understanding of when working on larger projects in the future where there are many people all working on the same code. It can be scary when merging your branch with a main branch, as you want to make certain that you aren't overwriting or removing code that someone else has worked hard on. Keeping large numbers of branches in sync seems like it must be almost as hard as writing the code itself!
To sum up my experience with the project, I found meeting the basic deliverables to be quite easy, most of the difficulties we had came from additional goals and challenges we gave to ourselves. There is much more functionality I would've liked to add and more style changes I would've liked to play with given more time, but I'm happy with the final product that we delivered.
Top comments (0)