Git Product home page Git Product logo

array-methods-and-callbacks's Introduction

FIFA Challenge - JavaScript-Foundations

Advanced JavaScript

Array Methods and Callbacks

Objectives

  • Array Methods - demonstrate ability to use .forEach .map .reduce .filter and describe their use cases
  • Callbacks - demonstrate the proper use a of a callback function by passing a function to another function as a parameter

Introduction

In this challenge, you will work with a data set summarizing every World Cup game from 1930 to 2014. As web developers, you will often work with JSON data to interact with servers, summarize data, get images to your page, and more. It is crucial that you cultivate a thorough understanding of data structures and methods early in your career.

The data set you are given (loaded in at the top of index.js) contains a report for every game played at every stage in the FIFA World Cup tournament since 1930. Each report is an object with many keys, including Year,Stage, Stadium, Home Team Name,Home Team Goals, Away Team Name, and Away Team Goals. There is a plethora of other data in this set as well, but we won't spend time working with it. You can read more about the data here or look at the sample object below if you are interested!

Your goal today will be to manipulate the data using array methods and callbacks to create interesting statistics.

Sample Data

  {
      "Year": 1930,
      "Datetime": "13 Jul 1930 - 15:00",
      "Stage": "Group 1",
      "Stadium": "Pocitos",
      "City": "Montevideo",
      "Home Team Name": "France",
      "Home Team Goals": 4,
      "Away Team Goals": 1,
      "Away Team Name": "Mexico",
      "Win conditions": "",
      "Attendance": 4444,
      "Half-time Home Goals": 3,
      "Half-time Away Goals": 0,
      "Referee": "LOMBARDI Domingo (URU)",
      "Assistant 1": "CRISTOPHE Henry (BEL)",
      "Assistant 2": "REGO Gilberto (BRA)",
      "RoundID": 201,
      "MatchID": 1096,
      "Home Team Initials": "FRA",
      "Away Team Initials": "MEX"
    },

Instructions

Task 1: Set up Project

Using VSCode and a Command Line:

  1. Fork repo and add TL as collaborator on Github.
  2. Clone your fork (not Lambda's repo by mistake!).
  3. cd into your newly cloned repository.
  4. Create a new branch by typing git checkout -b <firstName-lastName>.

Task 2: Minimum Viable Product

Find the file index.js and complete the tasks until all of your tests pass.

You may want to use the World Cup summary data on Fox Sports to check your math as you go.

Task 3: Stretch Goals

After you have completed the requirements, create a new file called stretch.js and practice with Array methods more.

See if you can complete one or more of the following challenges:

  • Create a function that takes country initials as a parameter and returns their total number of World Cup appearances.
  • Account for ties in your 'finals' data set
  • Create a function that takes country initials as a parameter and determines how many goals that country has scored in World Cup games since 1930.
  • Use .map to format country names into <h1> HTML headers.

FAQ

Where is my data?

Your data lives in a file called fifa.js. In order to work with and use your data in the index.js file, we used the import function of JavaScript. The first line in your file should be import { fifaData } from "fifa.js", which will save all of the data into an object called fifaData. You can confirm that your data has been imported correctly by running console.log(fifaData) in your index.js file.

What about ties?

In some cases, when the outcome of a game was decided by penalty kicks, the home team and away team will have the same number of goals scored. You can ignore ties for the purpose of this task, but you can also look to the "Win conditions" key and splice out the winning team. (See example below)

Win conditions": "France win on penalties (3 - 4)",

Resources

๐Ÿ“š Examples of .map, .reduce, and .filter

๐Ÿคทโ€โ™€๏ธ What the Heck is a Callback?

๐ŸคWorking with JSON in JavaScript

โšฝ๏ธ World Cup Summary Data to Check Work

๐Ÿ‘€ List of FIFA World Cup finals on Wikipedia

Submission Format

Follow these steps for completing your project.

  • Submit a pull request to merge Branch into master (student's Repo). Please don't merge your own pull request.
  • Add your Team Lead as a reviewer on the pull request.
  • Your Team Lead will count the project as complete by merging the branch back into master.

array-methods-and-callbacks's People

Contributors

atoledo1 avatar brityhemming avatar dombruno avatar mattmccarley avatar zoelud 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.