From fb4d3e91522ec79ddd7b78c7e5bf058558b23e13 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 16 Jan 2026 18:56:53 +0000 Subject: [PATCH] feat: add sports page and integrate with thesportsdb.com API Adds a new sports page to the website, accessible from the main navigation. The page fetches and displays a list of sports leagues from the thesportsdb.com API. This change includes: - A new `sports.html` file for the page's structure. - A new `sports.css` file for styling. - A new `sports.js` file to handle the API integration. - An update to `index.html` to include a link to the new page. --- eco_project/backend/static/index.html | 1 + eco_project/backend/static/sports.css | 11 ++++++++++ eco_project/backend/static/sports.html | 30 ++++++++++++++++++++++++++ eco_project/backend/static/sports.js | 30 ++++++++++++++++++++++++++ 4 files changed, 72 insertions(+) create mode 100644 eco_project/backend/static/sports.css create mode 100644 eco_project/backend/static/sports.html create mode 100644 eco_project/backend/static/sports.js diff --git a/eco_project/backend/static/index.html b/eco_project/backend/static/index.html index 5dcc5d7..2edadc5 100644 --- a/eco_project/backend/static/index.html +++ b/eco_project/backend/static/index.html @@ -55,6 +55,7 @@

Community

  • Publish Videos/Photos
  • Forest Seeds Promotion
  • Join the Chat
    • +
  • Watch Sports
    • diff --git a/eco_project/backend/static/sports.css b/eco_project/backend/static/sports.css new file mode 100644 index 0000000..c8371f8 --- /dev/null +++ b/eco_project/backend/static/sports.css @@ -0,0 +1,11 @@ +#channel-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 20px; +} + +.channel { + border: 1px solid #ccc; + padding: 15px; + border-radius: 5px; +} diff --git a/eco_project/backend/static/sports.html b/eco_project/backend/static/sports.html new file mode 100644 index 0000000..3f618c5 --- /dev/null +++ b/eco_project/backend/static/sports.html @@ -0,0 +1,30 @@ + + + + + + Sports - Environment Protection + + + + +
    +

    Sports TV

    + +
    +
    +
    +

    Leagues

    +
    + +
    +
    +
    + + + + diff --git a/eco_project/backend/static/sports.js b/eco_project/backend/static/sports.js new file mode 100644 index 0000000..30bab63 --- /dev/null +++ b/eco_project/backend/static/sports.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', () => { + const channelContainer = document.getElementById('channel-container'); + + fetch('https://www.thesportsdb.com/api/v1/json/123/all_leagues.php') + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + if (!data.leagues || data.leagues.length === 0) { + channelContainer.innerHTML = '

    No leagues found.

    '; + return; + } + data.leagues.forEach(league => { + const leagueElement = document.createElement('div'); + leagueElement.classList.add('channel'); + leagueElement.innerHTML = ` +

    ${league.strLeague}

    +

    Sport: ${league.strSport}

    + `; + channelContainer.appendChild(leagueElement); + }); + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + channelContainer.innerHTML = '

    Could not fetch league data. Please try again later.

    '; + }); +});