Album Geeks — The Fetch Experiment From a Record Lover
A revision of my Javascript project blog, originally published on March 23rd, 2021. I added the coding challenge as it is also necessary to speak about array methods.
Remember, in Javascript we need to create the elements to get from the HTML file. To see the entire code with all the elements included, here’s the Github repo.
As my second attempt at passing the Javascript project, I decided to do something more straightforward than the previous incomplete project. That would be a virtual record store.
Contrary to the previous attempt, I went for a limited amount of categories. That would be just vinyl, CD, and cassettes. Just like browsing your local hip record store by format. The form on index.html looks like this:
Meanwhile, inindex.js we’re going to call function, bindAlbumFormEventListener in which we’re going to add the Event Listener and declare each variable we’re going to submit:
Sounds simple, especially for a coding veteran, right? Well, let’s do the challenging part. That would be fetching the data. Javascript is not easy, and though I feel comfortable with the idea of manipulating the DOM. The fetch function can be as complicated as deciding which special edition colored vinyl of your favorite band’s new album you choose.
First, let’s go ahead and submit those albums for sale. Let’s fetch the POST request:
Once we submit the album, it will be rendered as required by the renderAlbumsIndex() method in album.js. Remember to also declare the album class in the same file:
Note: I used Tailwind CSS for the project. It’s a great CSS framework that allows the developer to enter the code directly in the markup. I recommend it for smaller Javascript projects like this one. It’s like sprinkles to your Vanilla Javascript project.
Of course, we have our GET request. Leaving that GET request behind would be like covering the rest of the album racks with a black blanket in a physical brick-and-mortar store. The GET request looks like this:
If we noticed on line 12, we are calling a function called albumLinks. To understand what we’re doing with those links, let’s take a look at the function:
If we click the album details, we are calling the showAlbumDetails function:
Once the showAlbumDetails is called, renderAlbumDetail from back inalbum.js will take care of showing us those album details.
And finally, we want to sell those albums. So deleting them to be sold is required. So let’s finalize with the fetch DELETE request.
Let’s say we’d like an extra challenge for the record store website. After all, we’d like it to have as many features as possible. Let’s assume there are going to be many collectors looking for expensive records. So let’s add an option to see the more expensive albums.
Let’s consider this a summary of all the steps in a Javascript project and start from the beginning.
Step 1:
Start with the button in the index.html file:
<div id=”album-details” class=”mt-4 border-2 rounded-sm border-gray-100 bg-gray-100"></div>
Step 2:
Create the element in which you’re going to select the button from the DOM.
const expensiveAlbumsEl = document.getElementById(“expensive-albums”)
Step 3:
Create the function. In this case, you need to write an array method to filter the data you want to iterate.
Step 4:
Create the event listener. If you have a function with several event listeners, you can enter it there:
Step 5:
Make sure to call that function with the event listener. In my project, I initialized several functions calling an init function.
So there we have it, the complete project with a rails API and three fetch requests. There’s more to do here to be in the same league as websites like Discogs. But at least we learned how to work on those challenging fetch requests and dominate the DOM with Javascript. If you excuse me, I’m going to buy some vinyl records.
