JS30 Challenge Day 04 — Array Cardio

Three sets of data with methods to show results hidden by onClick events

This challenge we practice array methods to give ourselves a refresher on the fundamentals of JavaScript. It helped me get better understandings of methods such as 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 console.log.

The array methods we deal with are: filter(), map(), sort(), and 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.

• Array.prototype.filter
• Array.prototype.map
• Array.prototype.sort
• Array.prototype.reduce

After brushing up on your array methods, let us begin the challenge! At the end of this, you can view my repo and check my JavaScript file to see my alternative attempt as well as my simplified attempt with the results logged through console.

We are given three arrays: an array of objects that have details of inventors; an array of people; and an array of random data.

Note: We have two exercises that are not displayed and you will have to view them in the JavaScript file.

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 have a pre tag to display our filtered data

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 console.log your result, you would have it pretty easy here but we want to take it up a notch and have the results displayed on our page. The issue here is our array is comprised of JavaScript objects, we need to convert it to a JSON string.

Our filter function that returns a filtered result and displays the result on an onClick event

So our 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, inventorsFilter matches 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.

You can view my repo here and my demo here.