THE BATTLE OF WOOF — WOOF
As my journey at Flatiron School continues, I took on the challenge of the lab called Woof-Woof. We have been working with Javascript and learning how to fetch from API’s. I wanted to challenge myself and really try to understand when to use the different methods when using fetch.
One of the tasks for this lab was to add the pups to the “dog bar” which was a div that was already on the page for us to use. After you completed adding the pup’s name to the bar, the user had to be able to click on the name of the pup and see more information about the one they chose. The user would be able to see the pup’s name, image and whether they were good or bad which was displayed by a button.
A bonus of this lab was when the user clicks on the good/bad dog button, it would change the pup’s status to the opposite of what it said when they clicked it. Therefore if the button said “Good Dog” it would change the button’s text to “Bad Dog” as well as in the database, so when the page refreshes it still has the same status as it was when the user clicked it.
One of the major tasks about this lab that I was excited about was the “Filter Good Dog Button”. The challenge was when you click the “Filter good dogs: OFF” button, the button should change to “Filter good dogs: ON”, or vice versa. If the button says “ON” meaning the filter is on, then the Dog Bar should only show those dogs whose button says “Good Dog”. This was very much intriguing and challenging at the same time because I was now getting acquainted with the concept of Fetch. However, I was very determined to do this and finish all that was asked of me in this lab.
I troubleshooted a great deal until I received the guidance and reminder about higher-order functions that pretty much comes in clutch in times of need. In this instance it was the .filter() Method..filter() returns an array of elements after filtering out certain elements from the original array. The callback function for the .filter() method should return true or false depending on the element that is passed to it. The elements that cause the callback function to return true are added to the new array.
Did you think that was it? Of course not! It is never that easy! I was able to console log and see that the filter was working, but the real challenge was adding it to the DOM. Whenever I attempted to add the pups, they were added to the Dog Bar along with the dogs that were already there. I had to figure out how to empty the dog bar before adding the filtered dogs. I was so ecstatic upon getting them to add to the DOM that I showed it to my buddy and she was like “Umm Rashad, it doesn’t filter back the other way”. Shucks! So I grabbed my laptop and retreated to my desk and worked on it again because now I had the foundation and understanding of what I did and in no time I was able to complete the lab.
It was a Friday night and after a rough week, it was definitely the high I needed to enter into the weekend. This journey of coding definitely can have your emotions in every direction but the little wins like the completion of this lab, doing features that I had never done before, are really worth it for me! As always Happy Coding Y’all.
