Giter VIP home page Giter VIP logo

lab-javascript-greatest-movies's Introduction

logo_ironhack_blue 7

LAB | Greatest Movies of All Time

Introduction

We've just learned some super useful methods, that will help us a lot to manipulate objects and arrays. In this exercise, we will focus on practicing them, and this being said, it is mandatory to implement at least one of them in each iteration.

Best way to practice is to work with real data. In the src/data.js file you will find an array of info about the best 250 movies of all times according to IMDB Ranking and you have to process it to display what each iteration ask! ๐Ÿ’ช

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 src/data.js contains an array of 250 movies. We are talking about the array of 250 objects containing the info about each movie. Here is one example of how the data is displayed:

{
  "title":"The Shawshank Redemption",
  "year":1994,
  "director":"Frank Darabont",
  "duration":"2h 22min",
  "genre":["Crime","Drama"],
  "rate":9.3
}

In the next a couple of iterations, you will be using your JS knowledge to manipulate with this data.

Instructions

You will be digging deeper into some "facts" that this set of data has in it. We see all this raw data, but that doesn't tell us a lot. For example, if we want to see which is the most popular movie, what is the average duration of the movie, list of movies by some director, etc. we wouldn't find the answers just by observing this array. Well, there comes your challenge. Read each iteration description carefully and let's start working on the solutions.

You have to work on the src/movies.js file.

Tests

Ohh 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 test. Remember to focus on one test at a time and read carefully the instructions to understand what you have to do.

Iteration 1: Order by year

We need to sort the movies in ascending order by their release year. This should be easy using one of the methods we've just learned. ๐Ÿ˜‰ Create a function orderByYear() that receives an array as parameter and returns a new sorted array.

If two movies have the same year, order them in alphabetical order by their title! โœ”๏ธ

๐Ÿ’ก Make sure not to mutate the original array ๐Ÿ˜‰

Iteration 2: Steven Spielberg. The best?

One of the most famous directors in cinema is Steven Spielberg, and he has some really awesome drama movies that are on our list, but we want to know how many of them are there.

Go ahead and create a howManyMovies() function that receives an array as a parameter and filter ๐Ÿ‘€ the array so we can have only the drama movies where Steven Spielberg is the director.

Iteration 3: Alphabetic order

Another popular way to order the movies is to sort them alphabetically using the title key. However, in this case, we only need to print the title of the first 20. Easy peasy for an expert like you. ๐Ÿ˜‰

Create a orderAlphabetically() function, that receives an array and returns an array of first 20 titles, alphabetically ordered. Return only the title of each movie, and if the array you receive has less than 20 movies, return all of them.

Iteration 4: All rates average

These are the best movies based on their rates, so supposedly all of them have a remarkable rate. In this iteration, we want to know the average rate of all of them and display it on the console. Create a ratesAverage() function that receives an array as a parameter and solves the challenge.

The rate must be returned rounded to 2 decimals!

๐Ÿ’ก Maybe you want to "reduce" the data to a single value. ๐Ÿ˜‰

Iteration 5: Drama movies

Drama is the genre that repeats the most on our array. Apparently, people love drama! ๐Ÿ‘€

Create a dramaMoviesRate() function that receives an array as a parameter to get the average rate of all drama movies! Let's see if it is better than the general average.

Again, rounded to 2 decimals!

Iteration 6: Time format

We get the info from the IMDB web page, but the duration info was saved in a format that difficult us a lot to compare movies.

Finding the longest movie is almost impossible using that format, so let's change it!

  • Create a turnHoursToMinutes() function that receives an array as parameter, and with some magic implemented by you - replaces the duration info of each of the movies for its equivalent in minutes. For example:
{
  "title":"The Shawshank Redemption",
  "year":1994,
  "director":"Frank Darabont",
  "duration":"2h 22min",
  "genre":["Crime","Drama"],
  "rate":9.3
}

Should be:

{
  "title":"The Shawshank Redemption",
  "year":1994,
  "director":"Frank Darabont",
  "duration":142,
  "genre":["Crime","Drama"],
  "rate":9.3
}

Keep in mind, you have to return a new array with all the info about movies, meaning, you shouldn't modify the original array. โœ…

BONUS: Best yearly rate average

We always hear so much about classic movies, but we want to know which year has the best average rate, so we can declare the BEST YEAR FOR CINEMA officially!

Go ahead and find which year have the best average rate for the movies that were released on that year! Create bestYearAvg() function that receives an array of movies and gives us an answer which year was the best year for cinema and what was its average rate.

Happy coding! โค๏ธ

lab-javascript-greatest-movies's People

Contributors

abernier avatar grountish avatar mjarraya avatar papuarza avatar sandrabosk 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.