api.js dan competition.html

//contoh api.js

const base_url = "https://api.football-data.org/v2/";
const token = "your token";
const fetchAPI = url => {
  return fetch(url, {
    headers: {
      'X-Auth-Token': token
    }
  })
  .then(res => {
    if (res.status !== 200) {
      console.log("Error: " + res.status);
      return Promise.reject(new Error(res.statusText))
    } else {
      return Promise.resolve(res)
    }
  })
  .then(res => res.json())
  .catch(err => {
    console.log(err)
  })
};

const getCompetitions = () => {
  fetchAPI(base_url+"competitions?plan=TIER_ONE")
    .then(data => {
      showCompetitions(data);
    })
    .catch(error => {
      console.log(error)
    })
}

const showCompetitions = data =>{
  let competitionsHTML = document.getElementById("listcompetition"); // listcompetition ini berasal dari id yang berada di html
  data.competitions.forEach(function(competition) {
    competitionsHTML.innerHTML += ` //kenapa menggunakan += karena ini untuk looping sebanyak data yang didapat
    <tr onclick="window.location.href='./competition.html?id=${competition.id}'">
      <td>${competition.area.name}</td>
      <td>${competition.name}</td>
      <td>${competition.plan}</td>
    </tr>`;

  });
}



// file pages/competition.html

                <table class="table highlight centered">
                  <thead>
                    <tr class="gradient-45deg-light-blue-cyan">
                      <th>Country</th>
                      <th>Name</th>
                      <th>Plan</th>
                    </tr>
                  </thead>
                  <tbody id="listcompetition"></tbody> // id ini yang nanti kita gunakan sebagai identitas nya
                </table>