My Awesome Pet Store
The next big project has arrived and what a project it is! There is A LOT of code in this bad boy but the end result looks great! Well, I guess it can technically look a little bit more flashy but that’s clearly not in my stylesheet!
How do I not have my own Netflix special yet? Thats comedy gold!
As I mentioned, there is a good amount of code in this project so I will probably end up using more screenshots in this blog than usual. Heck, it might all be screenshots if I am being honest. Copying and pasting the code into that gray container is definitely not easy. It doesn’t get formatted correctly, so yours truly has to go in and make it look better. No worries though. I have pushed my code up to Github and you can find it here.
Before diving into this project, I will now give you the sweet juicy details of what you will find at the end. First things first, this project still uses the fundamentals (HTML, CSS, JS). In my last blog, I wrote about the Fetch API. I also mentioned there that I will be using it in my next project and here we are, my next project.I will not go into too much detail about it but I will mention a couple of things along the way…. if you’re lucky.
I created a JSON file that contains all of our API data that we will use. We will fetch the data from there and display it for the whole world to see!! Another note is that all the images provided in this project come from the wonderful photographers at Pexels and Unsplash.
I would consider this project as more of a “show” project than anything else. There’s no “add-to-cart” here which sucks because if you look at the pics, you would want to clean out the whole store!!
The store has buttons that help you filter the results as well as …ready for it?…. a fully functional SEARCH BAR! *CROWD GASPS* Insane right??? You can search for the AVAILABLE types of pets AND you can search up a specific pet by their name. Alright, enough talk, lets build this beast!
Per usual, first step is setting up our HTML. So ready or not, here comes the first screenshot!
Not too much explanation needed here. You can see the store name, filter buttons, search bar, and the gallery where the images will eventually be displayed.
Before moving on though, I must mention that I do use font awesome icons in this project, well I use just one but you will need it so the page functions correctly as well as look good because at the end of the day, looking good is what it’s all about right?!? So do yourself a favor and go create an account with them. It’s free and you have a good amount of free icons you can use on your projects. Click here to go get that set up.
Also, I don’t use the typical default fonts that come built-in. I went to Google Fonts to select some cool new fonts. Remember, looking good is the endgame here. You don’t need to create an account with them. You just select the styles you want to use and import them into your project. Simple enough.
I will now showcase to you my header with the above set up (Font Awesome and Google Fonts)but the block you will see in the screenshot is my user id (I think) for font awesome and let’s not kid ourselves, I trust no one!!!! JK (not I’m not).
There it is. Our index.html is ready for some action! Again, I apologize (not really) for the screenshots but if you click here, you can just copy it… thief.
Now let’s add some color and make it pop! I will not go over the CSS here. It’s pretty self explanatory. We are just adding some colors and making it look good. I use a lot of flex here because it makes life easy. If you have any questions about anything at all, please feel free to reach me at 1-HAH-AHA-HAHA or you can also just leave a response at the bottom. It’s pretty quiet down there anyways. Alright, CSS coming your way.
Told you there was a good amount but once again, you can find my css file code here.
So it should look something like this now:
Not too shabby right! …. I noticed that the focus on the search-bar shows a blue border and makes it look uncool. A little fun fact is that I used FireFox when I was building this. I believe their dev tools are better compared to Chrome or any other browser for that matter. It definitely does what I want it to do in FireFox so if you are using anything besides FireFox, you might have to make a few styling changes.
Alright time for us to make this page do some magic! Let’s build our JS file. Make sure you have the following JSON file in your directory. This is what our code will be fetching.
The above is pretty simple to understand. We are selecting the elements we will be playing with and initializing some variables. The searchOptions array will be used for our search-bar functionality. That’s right, there’s a limit to how far our search-bar will search!
And it begins! Let’s go over a few details here even though the amazing comments provided give away what the code is doing.
We can see that we are using the Fetch API to fetch our data from the JSON file. We can also see that we are invoking/calling/running this function right away. Why you may ask? because fetching data does take a while to fetch. Therefore, we want it to fetch all of our data and store it into the pets variable we initialized earlier as soon as it can. Which is why we placed it in an IIFE (Immediately Invoked Function Expression). This will make the function invoke itself immediately, per it’s name. If you never seen it’s syntax before, here’s the gist of it:
(function() {
//code block
})();You basically wrap the function in parenthesis and add another set of parenthesis at the end.
I made the function as an async function because, as mentioned in my last blog, the Fetch API returns a promise. In order to get the data out we would have to add a few .then() to it to get our data. Async/Await work great with Promises. It cleans up the code (as you can see above) to avoid using .then() chains. I won’t go into too much detail here but believe me when I say that it’s worth reading over how well they mesh together if you haven’t seen it before.
Outside us invoking the fetching, we added Event Listeners to the buttons and search-bar. This is why I mentioned Font Awesome earlier. One of the listeners is attached to the icon we use in this project. So make sure you get yourself set up with Font Awesome.
The 3rd event listener is attached to our search-bar. I added a “keyup” event to listen to when the user presses “enter”. The keyCode for “enter” is 13. Therefore, when the user presses on the enter key, the event will trigger and it will invoke the the callback function.
The two functions above is our handlers. They handle the events triggered. They delegate which functions to invoke and what to pass as arguments to them.
- handleButton grabs the text of the button clicked, makes it lowercase and passes it on to the makeSingular function. The makeSingular function does what it says. It will convert “dogs” to “dog”. If you look at the API, the types are SINGULAR therefore, we need to make sure we pass on the singular form of the button clicked. We then pass that to our displayData function which will, you guessed it, display the data based on the button clicked. Dogs will show dogs, cats will show cats, etc.
- handleSearch does almost the same as handleButton. It will grab the user’s input from the search-bar, make the string lowercase and pass it along to the checkInput function. The checkInput function will check to see what the user tried to search. If it matches with a pet type or pet name, it will display the data onto the page. It then clears the search-bar.
The displayData function is pretty long so I will break it up into two screenshots.
This function will display the data based off on what filter/button was passed in.
- First part shows what happens if “All” was selected/clicked. It will display all the pets in our JSON file onto the page.
- Second part shows what happens if they selected a specific pet type. The first line in the else statement will filter the pets array to only provide us with the types of pets that was selected. For example, if we select “Dogs”, we will filter out only the objects that have the property “type: dog”.
Before moving along, you might’ve noticed, with your keen eye, that I have a function that I call upon in the beginning of the displayData function. You can see that I have an arrayShuffle function. Again, pretty easy assumption on what this function does. It will shuffle the array passed in.
If we look at the JSON file, everything is in order. If we select to display all the pets, the page will show dogs first, then the cats, then the rabbits and then the turtles. In other words, it will display the pets in chronological order. Seems pretty boring to me so I decided to shuffle it up a bit. It makes the filter options a lot more noticeable in my opinion. The code is pretty simple. If you have any questions, remember, I did provide my hotline number above or you can just leave a response below.
I forgot to show you guys the makeSingular function earlier so here it is. I also have another function here that will be used in the upcoming screenshot. The capitalize function takes in a word and capitalizes the first letter. Easy enough. Alright the last bit of code is coming right up!
The checkInput function is used with the search-bar. I explained what it does a little earlier but just so you won’t have to scroll-up again, I will summarize it again.
The function takes in the value that was in the search-bar. First thing it does is get all the names from our JSON file and store it in our petNames variable. The map method will return a new array with all of the pet names that is in our API. This will help us see if a user is searching for a specific pet that has a name.
Here’s the code explained a little more per code block:
- First code block will check if the user input matches any of the options that is stored in our searchOptions array. If it does match, we make the value singular and pass it along to the displayData function to handle the rest.
- Second code block will check if the user is searching for a pet name that they might’ve seen. It will check if the name searched is in our petNames array and if it is, we will find that specific pet and display their info only. Pretty neat huh.
- Third code block is straight forward. We don’t got what you are looking for so get lost!
You can find the final JavaScript code here and you can see what all the code above put together does below:
Didn’t I tell you? I said it was long right? Imagine me trying to put all that code in that gray code block! I probably would’ve been at the half-way mark right now. Thank goodness for screenshots! Although, I probably should’ve broken this up into a two-parter. That might’ve made this blog way shorter…. meh maybe next time.
My closing segment:
This was a fun a project. Had a few bumps along the way but managed to StackOverflow my way out of it and ensure that the project worked and looked good. Let’s mark this one off from our project list and go onto our next project. See you then!
