chore: convert football teams card to lab

[jdwilkin4]

We currently have this workshop in the JS beta version https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/learn-modern-javascript-methods-by-building-football-team-cards/step-45

As I was working on updating it and adding it to main, I found myself essentially recreating a lab. so it just makes sense to convert this to a lab.

I propose we keep the HTML and CSS as is except we will remove the <p>Sport: <span id="sport"></span></p>. The sport will always be football (or soccer as known to our american friends 😄 ) We will also remove the <option value="nickname">Nicknames</option>

For the JS, we wan test that they create their own footballTeam object with the following properties:

• team, year, headCoach and players.

const footballTeam = {
   team: "team name goes here",
   year: year goes here (number type),
   headCoach: "coach name goes here"
   players: array of objects goes here
};

Players will be an array of objects and we can test that they create at least four objects with the following properties:

 {
      name: "Name goes here",
      position: "position goes here",
      isCaptain: boolean
    },

We should test that the position value should be either "forward", "midfielder", "defender", or "goalkeeper"

As for the rest, we should only care about testing for the existence of the object properties and for the correct data types for the values

Then we can test that the team name, year and head coach values that come from the object are displayed on the screen

Lastly, we will test that they build out a filter function to filter by position or all players.

[ilenia-magoni]

We will also remove the <option value="nickname">Nicknames</option>

what about the number property/option? You list position, name and isCaptain only, but also do not mention removing number

[jdwilkin4]

yeah, i just forgot to mention removing that. removing all relevant HTML that isn't tied to the following

   {
      name: "Name goes here",
      position: "position goes here",
      isCaptain: boolean
    },