We have just learned some super useful methods that will help us manipulate objects and arrays. In this exercise, we'll focus on practicing them. You're required to implement at least one of these methods in each iteration.
The best way to practice is to work with a real dataset. In the file data.js
you'll find an array of information about the 250 best movies of all time, according to the IMDB Ranking. Each iteration will ask you to shape this information and display it in a different manner! ๐ช
- Fork this repo
- Clone this repo
- Practice JavaScript advanced methods (
map
,reduce
,filter
andsort
to manipulate arrays)
-
Upon completion, run the following commands:
git add . git commit -m "done" git push origin master
-
Create Pull Request so your TAs can check up your work.
The file src/data.js
contains an array of 250 movies. Each entry is represented as an object and contains some relevant information about that specific movie.
We picked the following movie randomly from the array:
// ...
{
title: 'Fight Club',
year: 1999,
director: 'David Fincher',
duration: '2h 19min',
genre: ['Drama'],
rate: 8.8
},
// ...
In the next few iterations you'll be using the knowledge you have acquired so far to manipulate this data and to extract some insights.
Let's dig deeper into some of the information contained within this dataset. We have a huge pile of raw data, but that doesn't tell us much. For example, if we wanted to learn which is the most popular movie, what is the average duration of the movie, list of movies by a given director, etc. we wouldn't find the answers just by observing this array.
This is where you come in. Read each iteration description carefully and let's start working on the solutions.
All of your work should be done on the src/movies.js
file.
Oh yes! We have our beloved tests, and you already know how this works. Open the SpecRunner.html
file on your browser and start coding to pass the tests. Remember to focus on one test at a time and read carefully the instructions to understand what you have to do.
The movies in our dataset are the best of the best. Let's try to figure out what's the average rate for the top 250 IMDB movies.
To do so, you should declare a function called calculateAverageMovieRate
that receives an array of movies as an argument and returns a number representing the average rate
for all of the movies in the array.
๐ก You might want to reduce
the data to a single value. ๐
Drama is the most common movie genre in the top 250 movie list. People seem to love drama ๐
Declare a function named calculateAverageDramaRate
that receives an array of movies as an argument and returns a number that represents the average rate of all drama movies! We wonder if it will be higher than the general average ๐ค.
Our movies are currently organized by the property rate
in descending order. We want to sort our movie array in ascending order by the movie's release year (that is, the oldest movies should be first and the newest should come last).
It shouldn't be too hard to sort
anything using one of the array methods we've just learned. ๐
Declare a function named orderByYear
that receives an array of movies as the single argument and returns a new array of movies sorted by release year.
(In case two movies have the same year, order them in alphabetical order by their title! โ๏ธ)
Steven Spielberg is one of the most recognizable directors in the history of cinema. He's a master of drama filmmaking. We wonder: how many of the top 250 movies were directed by Steven Spielberg and fit the genre
"drama"?
Go ahead and declare a function named countSpielbergDramaMovies
that expects an array of movies as an argument, filter
s it ๐ and outputs the total number of movies directed by Steven Spielberg and fit the genre
"drama".
Another popular way to order movies would be by title
, alphabetically.
However, this time around, we're only interested in getting the the titles for the first 20 films after they've been ordered alphabetically. This might sound confusing, but the unit tests should be particularly helpful in this situation.
Declare a function named orderAlphabetically
that receives as the single argument an array of movie objects and returns an array of ordered titles. Remember: we're only looking for the title of each movie, not the movie object. You might need to combine at least two array methods to solve this one.
The dataset we have was extracted directly from the IMDB page for each movie. IMDB displays the duration of a movie in a somewhat inconvenient manner, as it doesn't allow us to make direct comparisons or sorting without performing some transformations on the value.
Finding the longest movie is almost impossible using that format, so let's change it!
Create a function named turnHoursToMinutes
that takes an array of movies as an argument and returns a new array where each movie has had it's duration converted from the IMDB time format into the correspondent number of minutes. For example:
// ...
{
title: '2001: A Space Odyssey',
year: 1968,
director: 'Stanley Kubrick',
duration: '2h 29min',
genre: ['Adventure', 'Sci-Fi'],
rate: 8.3
},
// ...
Should be:
// ...
{
title: '2001: A Space Odyssey',
year: 1968,
director: 'Stanley Kubrick',
duration: 149,
genre: ['Adventure', 'Sci-Fi'],
rate: 8.3
},
// ...
Keep in mind that you should return a new array with all of the information regarding each movie. That means you should not mutate the original array.
It's a common belief that classical movies are unbeatable. Our rich dataset and programming superpowers will allow us to find out if that belief holds any truth.
Lets use the knowledge we've acquired thus far and calculate which year has the best average rate overall.
Declare a function named bestYearAvg
that expects an array of movies and returns the year with the best overall average movie rate.
Happy coding! ๐