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.

    '; + }); +});