JS30 Challenge Day 04 — Array Cardio
reduce() or revisiting methods such as
filter(). After completing the challenge, I wanted to up the ante a bit and throw some flavor to displaying the results from the methods rather than through
The array methods we deal with are:
reduce(). I will not go into much detail for these methods but feel free to check the links below if you need a refresher yourself.
We are given three arrays: an array of objects that have details of inventors; an array of people; and an array of random data.
The array of inventors has the most exercises, with the array of people and data having the least. Let us start with the array of inventors first, in which we have to take the data and create functions that display what we need.
We like to list the inventors that were born in the 1500s, and we’ll use
Array.filter() to manage this with a syntax of inventor’s years greater than or equal to 1500 but under 1600. If you take a look at the array of inventors, you will notice there are only two that fall under that category so your results should return two objects. If you simply
inventorFilter() gets called through an
onClick event from our button tag. There are a couple of things going on here when
inventorFilter() gets called. We declare two variables, one getting the element on our document and the other which filters our array. With the innertext in our
inventorsFilter element, we stringify our results.
We declare a
if statement here with our
toggleInventors variable earlier. If our style display,
inline-block we toggle it to
none, otherwise we toggle it to
inline-block. This allows us change our display and have our results either shown or hidden when we click on our button. The rest of the functions are we have are more or less the same for our inventors array.