Giter Club home page Giter Club logo

lab-javascript-greatest-movies's Introduction

Lab | Greatest Movies of All Time

Introduction

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! ๐Ÿ’ช

Requirements

  • Fork this repo
  • Clone this repo
  • Practice JavaScript advanced methods (map, reduce, filter and sort to manipulate arrays)

Submission

  • 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.

Starter code

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.

Instructions

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.

Tests

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.

Iteration 1: Average movie rate

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. ๐Ÿ˜‰

Iteration 2: Drama movies

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 ๐Ÿค”.

Iteration 3: Ordering by year

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! โœ”๏ธ)

Iteration 4: Steven Spielberg. The best?

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, filters it ๐Ÿ‘€ and outputs the total number of movies directed by Steven Spielberg and fit the genre "drama".

Iteration 5: Alphabetic Order

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.

Iteration 6: Time Format

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.

Bonus Iterations

Iteration 7: Best yearly rate average

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! ๐Ÿ’™

lab-javascript-greatest-movies's People

Contributors

josecarneiro avatar papuarza avatar sandrabosk avatar abernier avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.