Create a Cricket Points Table in Javascript - Part 2
Tags: javascript, beginners, webdev, tutorial
Published: 2019-10-24 10:24:05


## Overview
> Click on the following links to read [part1](https://dev.to/afewminutesofcode/create-a-cricket-points-table-in-javascript-part-1-49p1) of the series.

> Follow @afewminutesofcode on [Instagram](https://www.instagram.com/afewminutesofcode) and [YouTube](http://youtube.com/afewminutesofcode) for video content for this series and view original article at [afewminutesofcode.com](https://afewminutesofcode.com)

In this tutorial we are going to create a function to calculate when a team has won, lost or there is no result.

#### Initial Setup
We are going to develop our app in codesandbox so to begin we will head over to [https://codesandbox.io/s/](https://codesandbox.io/s/) and select the **React Icon** as shown below.

![codesandbox.io](https://thepracticaldev.s3.amazonaws.com/i/5g2teik1cpaeqr6cpl00.png)

We are going to create some folders to structure our code.

* **data** Contains all the matches from the tournament and can be <Link to="https://github.com/afewminutesofcode/cricket-points-table-tutorial/tree/csb-1565442959047/src/data">viewed here</Link>.
* **helpers** - We will create 3 files calcCompletedMatches, getOppTeam and constants.
* **points-table** - We will create 3 files teamWon, teamLost, teamNoResult
* **__tests__** - where we will add our unit tests.

{% youtube JcEzBGDHVbs %}

#### Calculate Completed Matches

In our data structure we can tell a match is completed when `fin === 1` and we also are only concerned about matches of `type===1` (group matches). So we will create a helper function to filter out only completed matches for us.

```js
export const calcCompletedMatches = (
  matches,
  teamNum,
  team
) =>
  matches.filter(
    match =>
      match[teamNum] === team &&
      match["type"] === 1 &&
      match["fin"] === 1
  );

```
We should expect our first test below to return 45 matches (all completed group matches) and our second test to return 9 the amount of matches where England where team1.

```js
import { calcCompletedMatches } from "../helpers/calcCompletedMatches";
import { matches } from "../data/matches";

it("calcCompletedMatches", () => {
  expect(calcCompletedMatches(matches)).toHaveLength(45);
  expect(calcCompletedMatches(matches, "t1", "ENG")).toHaveLength(9);
});

```

#### Constants
We will use the below constants throughout the application to make our code more readable.

```js
export const SHOW_TEAM = false;
export const SHOW_OPP = true;
export const WON = "won";
export const LOST = "lost";
export const DRAWN = "drawn";
export const POINTS = "points";
export const NORESULT = "nr";
export const TEAM1 = "t1";
export const TEAM2 = "t2";

```
#### getOppTeam
We will create a helper function to enable us to easily access the opposition team in our matches array.

```js
import { TEAM1, TEAM2 } from "./constants";

export const getOppTeam = teamNum => teamNum === TEAM2 ? TEAM1 : TEAM2;

```

**Tests**
```js
import { getOppTeam } from "../helpers/getOppTeam";

it("getOppTeam.", () => {
  expect(getOppTeam("t1")).toBe("t2");
  expect(getOppTeam("t2")).toBe("t1");
});
```

#### Calculate Matches Won
To see who has won from our data structure we will pass in four parameters.
* matches
* teamNum (t1,t2)
* team eg ENG
* stat (will always be Ru in this example but gives flexibility to extend in the future).

Then the below gets all the completed matches and returns an array of all the matches where the teams runs are greater than the opposition. Then returns the length.

```js
import { calcCompletedMatches } from "../helpers/calcCompletedMatches";
import { getOppTeam } from "../helpers/getOppTeam";

export const teamWon = ({
  matches,
  teamNum,
  team,
  stat
}) => {
  const oppTeam = getOppTeam(teamNum);
  return calcCompletedMatches(
    matches,
    teamNum,
    team
  ).filter(
    match =>
      match[`${teamNum}${stat}`] >
      match[`${oppTeam}${stat}`]
  ).length;
};

```

**Test** - Our test returns all the matches ENG won as t1
```js
import { teamWon } from "../points-table/teamWon";
import { matches } from "../data/matches";

it("teamWon.", () => {
  expect(
    teamWon({
      matches,
      teamNum: "t1",
      team: "ENG",
      stat: "Ru"
    })
  ).toBe(6);
});

```

#### Calculate Matches Lost
Our Matches Lost function will be very similar to the won function except instead of returning matches where runs is greater and opposition we will do where runs are less than opposition.

```js
.filter(
    match =>
      match[`${teamNum}${stat}`] <
      match[`${oppTeam}${stat}`]
  )
```

#### Calculate No Results
To calculate matches with no result we change our filter to look for where `NR === 1`

eg

```js
.filter(match => match[`${teamNum}NR`] === 1)
```

In this lesson we have started to create the building blocks required for our points table application and in [Part 3](http://afewminutesofcode.com/create-a-cricket-points-table-in-javascript-part-3) we are going to create a function to handle the totals for the points standings eg P/W/L/NR/RF

To follow the code so far head over to codesandbox.

[![Edit new](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/afewminutesofcode/cricket-points-table-tutorial/tree/csb-1565442959047/?fontsize=14)