Introduction
Phase 1 is coming to a close and we were tasked with our Javascript final project. For our final project, we were entrusted with creating a Javascript app that is HTML/CSS/JS frontend which accesses data from a public API or a locally hosted JSON server, runs entirely on a single page, and incorporates at least 3 separate event listeners. When brainstorming for what I wanted to create for this project I knew I wanted to do something a little nerdy. Maybe something that was related to Dungeons and Dragons or anime related. I searched for free APIs and came across a helpful website that contained all sorts of free APIs from animals, business, health, and so on. If you don’t know where to start, this link will give you a bunch of options that may help.
https://github.com/public-apis/public-apis
Expressions and .filter
In my project I wanted you to be able to:
- generate a random anime quote
- be able to like/unlike it
- your liked quotes accumulated in a list that you could use for later
- be able to tell you if you already liked a quote and it was in your list. From my API I only wanted to pull the quote and the title of the anime it was from.
I was really excited, everything was going smoothly. My buttons worked and generated a new anime quote. My “Like This Quote” button pulled my liked quotes into a pretty array underneath. However, I ran into a serious issue, when liking however many quotes you liked, it created an array of those quotes but when you unlike those quotes it would not pull that quote out, thus the original array remained. This resulted in an array that kept being added to and not removing quotes you didn’t like. I had trouble figuring out how to fix this and asked my cohort leader. He said Boolean expressions were a possible solution to my problem, specifically !== and the callback function, Array.prototype.filter().
The strict inequality operator(!==) returns true if two values are not equal without performing type conversions. This is really important from a strict equality operator(===) which returns true if two values are equal without performing type conversions. Even if the values on both sides of the operator look similar (e.g., '42' === 42), the === operator will only return true if the data types also match. The === operator will not work here. This was the program’s way of determining what stayed in the new array.
Array.prototype.filter() accepts one argument, a callback function that it will invoke with each element in the array. For each element passed to the callback, if the callback's return value is true, that element is copied into a new array. If the callback's return value is false, the element is filtered out. After iterating over every element in the collection .filter() returns the new array, my new list of only liked quotes.
A good explanation with example: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
With these two together I created a function that checked if quotes were liked or not and returned a new array of only like quotes. This fixed my display issue and now my website works with removing and adding quotes!
Thank you so much for taking your time to read my blog. I hope you learned from my mistakes or found a better way of coding. If you want to see the final project please check out:
https://github.com/sumeikom/animechan-quotes
Thank you so much!
Top comments (0)