JavaScript

Exercises Set 5

football-time-exercise-output.png

body {
  font-family: 'Arial', sans-serif;
  background-color: #e0f7fa;
  color: #004d40;
  margin: 0;
  padding: 0;
}

.introduction {
  text-align: center;
  padding: 20px;
  background-color: #004d40;
  color: #ffffff;
}

h1 {
  font-size: 3em;
  margin: 0;
}

.details-section {
  padding: 20px;
}

h2 {
  color: #00695c;
}

#all-clubs-section,
#trophy-70-or-more-section,
#premier-league-section,
#trivia-section {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th,
td {
  padding: 10px;
  border: 1px solid #004d40;
  text-align: left;
}

th {
  background-color: #004d40;
  color: #ffffff;
}

td {
  background-color: #e0f7fa;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  background-color: #004d40;
  color: #ffffff;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  transition: background-color 0.3s;
}

li:hover {
  background-color: #00796b;
}

#total-trophies-section {
    background-color: #f0f0f0;
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#total-trophies-section h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

#total-trophies-section p {
    font-size: 18px;
    line-height: 1.6;
}

// Predefined array of football club objects
const footballClubs = [{
    name: 'Real Madrid',
    country: 'Spain',
    trophies: 98,
    league: 'La Liga'
  },
  {
    name: 'Manchester United',
    country: 'England',
    trophies: 66,
    league: 'Premier League'
  },
  {
    name: 'Bayern Munich',
    country: 'Germany',
    trophies: 71,
    league: 'Bundesliga'
  },
  {
    name: 'Liverpool',
    country: 'England',
    trophies: 65,
    league: 'Premier League'
  },
  {
    name: 'ATK Mohun Bagan',
    country: 'India',
    trophies: 6,
    league: 'Indian Super League'
  },
  {
    name: 'Juventus',
    country: 'Italy',
    trophies: 68,
    league: 'Serie A'
  },
  {
    name: 'Paris Saint-Germain',
    country: 'France',
    trophies: 42,
    league: 'Ligue 1'
  },
  {
    name: 'Barcelona',
    country: 'Spain',
    trophies: 95,
    league: 'La Liga'
  },
  {
    name: 'Chelsea',
    country: 'England',
    trophies: 32,
    league: 'Premier League'
  },
  {
    name: 'Mumbai City FC',
    country: 'India',
    trophies: 3,
    league: 'Indian Super League'
  },
  {
    name: 'AC Milan',
    country: 'Italy',
    trophies: 48,
    league: 'Serie A'
  },
  {
    name: 'Inter Milan',
    country: 'Italy',
    trophies: 41,
    league: 'Serie A'
  },
  {
    name: 'Manchester City',
    country: 'England',
    trophies: 29,
    league: 'Premier League'
  },
  {
    name: 'Arsenal',
    country: 'England',
    trophies: 46,
    league: 'Premier League'
  },
  {
    name: "Ajax",
    country: "Netherlands",
    trophies: 48,
    league: "Eredivisie"
  },
];

// Write code below

// Predefined array of football club objects
const footballClubs = [{
    name: 'Real Madrid',
    country: 'Spain',
    trophies: 98,
    league: 'La Liga'
  },
  {
    name: 'Manchester United',
    country: 'England',
    trophies: 66,
    league: 'Premier League'
  },
  {
    name: 'Bayern Munich',
    country: 'Germany',
    trophies: 71,
    league: 'Bundesliga'
  },
  {
    name: 'Liverpool',
    country: 'England',
    trophies: 65,
    league: 'Premier League'
  },
  {
    name: 'ATK Mohun Bagan',
    country: 'India',
    trophies: 6,
    league: 'Indian Super League'
  },
  {
    name: 'Juventus',
    country: 'Italy',
    trophies: 68,
    league: 'Serie A'
  },
  {
    name: 'Paris Saint-Germain',
    country: 'France',
    trophies: 42,
    league: 'Ligue 1'
  },
  {
    name: 'Barcelona',
    country: 'Spain',
    trophies: 95,
    league: 'La Liga'
  },
  {
    name: 'Chelsea',
    country: 'England',
    trophies: 32,
    league: 'Premier League'
  },
  {
    name: 'Mumbai City FC',
    country: 'India',
    trophies: 3,
    league: 'Indian Super League'
  },
  {
    name: 'AC Milan',
    country: 'Italy',
    trophies: 48,
    league: 'Serie A'
  },
  {
    name: 'Inter Milan',
    country: 'Italy',
    trophies: 41,
    league: 'Serie A'
  },
  {
    name: 'Manchester City',
    country: 'England',
    trophies: 29,
    league: 'Premier League'
  },
  {
    name: 'Arsenal',
    country: 'England',
    trophies: 46,
    league: 'Premier League'
  },
  {
    name: "Ajax",
    country: "Netherlands",
    trophies: 48,
    league: "Eredivisie"
  },
];

// Write code below

function createFootballTimePage() {
    
    const introDiv = document.createElement('div');
    introDiv.className = 'introduction';
    const h1 = document.createElement('h1');
    h1.textContent = 'Football Time';
    introDiv.appendChild(h1);
    
    const detailsDiv = document.createElement('div');
    detailsDiv.className = 'details-section';
    
    const allClubsDiv = document.createElement('div');
    allClubsDiv.id = 'all-clubs-section';
    const h2AllClubs = document.createElement('h2');
    h2AllClubs.textContent = 'All Clubs';
    allClubsDiv.appendChild(h2AllClubs);

    const allClubsTable = document.createElement('table');
    const theadAllClubs = document.createElement('thead');
    const trAllClubsHeader = document.createElement('tr');
    const thName = document.createElement('th');
    thName.textContent = 'name';
    const thCountry = document.createElement('th');
    thCountry.textContent = 'Country';
    const thTrophies = document.createElement('th');
    thTrophies.textContent = 'Trophies';
    trAllClubsHeader.appendChild(thName);
    trAllClubsHeader.appendChild(thCountry);
    trAllClubsHeader.appendChild(thTrophies);
    theadAllClubs.appendChild(trAllClubsHeader);
    const tbodyAllClubs = document.createElement('tbody');
    footballClubs.forEach(club => {
        const tr = document.createElement('tr');
        const tdName = document.createElement('td');
        tdName.textContent = club.name;
        const tdCountry = document.createElement('td');
        tdCountry.textContent = club.country;
        const tdTrophies = document.createElement('td');
        tdTrophies.textContent = club.trophies;
        tr.appendChild(tdName);
        tr.appendChild(tdCountry);
        tr.appendChild(tdTrophies);
        tbodyAllClubs.appendChild(tr);
    });
    allClubsTable.appendChild(theadAllClubs);
    allClubsTable.appendChild(tbodyAllClubs);
    allClubsDiv.appendChild(allClubsTable);

    const trophy70Div = document.createElement('div');
    trophy70Div.id = 'trophy-70-or-more-section';
    const h2Trophy70 = document.createElement('h2');
    h2Trophy70.textContent = 'Clubs with More Than 70 Championships';
    trophy70Div.appendChild(h2Trophy70);

    const trophy70Table = document.createElement('table');
    const theadTrophy70 = document.createElement('thead');
    const trTrophy70Header = document.createElement('tr');
    const thClubName = document.createElement('th');
    thClubName.textContent = 'Name of the Club';
    const thTrophies70 = document.createElement('th');
    thTrophies70.textContent = 'Trophies';
    trTrophy70Header.appendChild(thClubName);
    trTrophy70Header.appendChild(thTrophies70);
    theadTrophy70.appendChild(trTrophy70Header);
    const tbodyTrophy70 = document.createElement('tbody');
    footballClubs.filter(club => club.trophies > 70).forEach(club => {
        const tr = document.createElement('tr');
        const tdClubName = document.createElement('td');
        tdClubName.textContent = club.name;
        const tdTrophies70 = document.createElement('td');
        tdTrophies70.textContent = club.trophies;
        tr.appendChild(tdClubName);
        tr.appendChild(tdTrophies70);
        tbodyTrophy70.appendChild(tr);
    });
    trophy70Table.appendChild(theadTrophy70);
    trophy70Table.appendChild(tbodyTrophy70);
    trophy70Div.appendChild(trophy70Table);

    const premierLeagueDiv = document.createElement('div');
    premierLeagueDiv.id = 'premier-league-section';
    const h2PremierLeague = document.createElement('h2');
    h2PremierLeague.textContent = 'Premier League';
    premierLeagueDiv.appendChild(h2PremierLeague);

    const premierLeagueList = document.createElement('ul');
    premierLeagueList.id = 'premier-league';
    footballClubs.filter(club => club.country === 'England').forEach(club => {
        const li = document.createElement('li');
        li.textContent = club.name;
        premierLeagueList.appendChild(li);
    });
    premierLeagueDiv.appendChild(premierLeagueList);

    const triviaDiv = document.createElement('div');
    triviaDiv.id = 'trivia-section';
    const h2Trivia = document.createElement('h2');
    h2Trivia.textContent = 'Trivia Section';
    triviaDiv.appendChild(h2Trivia);

    const triviaList = document.createElement('ul');
    triviaList.id = 'trivia';
    footballClubs.forEach(club => {
        const li = document.createElement('li');
        li.textContent = `${club.name} from ${club.country} plays in ${club.league} and has won ${club.trophies} championships.`;
        triviaList.appendChild(li);
    });
    triviaDiv.appendChild(triviaList);

    const totalTrophiesDiv = document.createElement('div');
    totalTrophiesDiv.id = 'total-trophies-section';
    const h2TotalTrophies = document.createElement('h2');
    h2TotalTrophies.textContent = 'Total Trophies';
    totalTrophiesDiv.appendChild(h2TotalTrophies);

    const totalTrophies = footballClubs.reduce((acc, club) => acc + club.trophies, 0);
    const pTotalTrophies = document.createElement('p');
    pTotalTrophies.textContent = `In total all these listed clubs have won ${totalTrophies} number of trophies.`;
    totalTrophiesDiv.appendChild(pTotalTrophies);

    document.body.appendChild(introDiv);
    document.body.appendChild(detailsDiv);
    document.body.appendChild(allClubsDiv);
    document.body.appendChild(trophy70Div);
    document.body.appendChild(premierLeagueDiv);
    document.body.appendChild(triviaDiv);
    document.body.appendChild(totalTrophiesDiv);
}

createFootballTimePage();