Hacks

Similarities

There are some similarities that I see with the Javascript in the Jokes API

They all have similar syntax with each other
All connect to the table made using HTML code
Use a lot of .json and .log
Use fetch a lot as well as if and else statements
Make use of functions to check and run things
Use onclick to run a function each time an action occurs
All do different things using the same API

Breaking up the code for Covid API

The code below makes a table using HTML code and makes 4 columns titled Time, All-time Cases, Recorded Deaths, and Active Cases. It also makes an id for each row under those 4 columns with the id name the same as its column name.

<!-- HTML table fragment for page -->
<table>
    <thead>
    <tr>
      <th>Time</th>
      <th>All-time Cases</th>
      <th>Recorded Deaths</th>
      <th>Active Cases</th>
    </tr>
    </thead>
    <tbody>
      <td id="time"></td>
      <td id="total_cases"></td>
      <td id="total_deaths"></td>
      <td id="active_cases"></td>
    </tbody>
  </table>

The code below also uses HTML code to output a table with the same columns and titles as the code above. But, this one has a different id with the id name equal to \"result\".

<table>
    <thead>
    <tr>
      <th>Country</th>
      <th>All-time Cases</th>
      <th>Recorded Deaths</th>
      <th>Active Cases</th>
    </tr>
    </thead>
    <tbody id="result">
      <!-- generated rows -->
    </tbody>
  </table>

The code below uses the link to the API to extract specific variables and then output them in the \"result\" section in the HTML table. It also makes headers.

<!-- Script is layed out in a sequence (no function) and will execute when page is loaded -->
<script>
    // prepare HTML result container for new output
    const resultContainer = document.getElementById("result");
  
    // prepare fetch options
    const url = "https://flask.nighthawkcodingsociety.com/api/covid/";
    const headers = {
      method: 'GET', // *GET, POST, PUT, DELETE, etc.
      mode: 'cors', // no-cors, *cors, same-origin
      cache: 'default', // *default, no-cache, reload, force-cache, only-if-cached
      credentials: 'omit', // include, *same-origin, omit
      headers: {
        'Content-Type': 'application/json'
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
    };

The code below fetches the url and headers made in the segment of code presented above. The code checks for any response errors in those headers uding an if statement and if there is none, those elements are appended to the HTML table. The responses are also outputted using JSON data.

// fetch the API
  fetch(url, headers)
    // response is a RESTful "promise" on any successful fetch
    .then(response => {
      // check for response errors
      if (response.status !== 200) {
          const errorMsg = 'Database response error: ' + response.status;
          console.log(errorMsg);
          const tr = document.createElement("tr");
          const td = document.createElement("td");
          td.innerHTML = errorMsg;
          tr.appendChild(td);
          resultContainer.appendChild(tr);
          return;
      }
      // valid response will have json data
      response.json().then(data => {
          console.log(data);
          console.log(data.world_total)

The code below gets all the data specific to the API such as World Data, Country Data, and then are appended to the HTML table. This is achieved through the getElementById. They are appended to their respective row based on whater their data is about. The code also checks for fetch errors and then appends to the table again.

// World Data
  document.getElementById("time").innerHTML = data.world_total.statistic_taken_at;
  document.getElementById("total_cases").innerHTML = data.world_total.total_cases;
  document.getElementById("total_deaths").innerHTML = data.world_total.total_deaths;
  document.getElementById("active_cases").innerHTML = data.world_total.active_cases;

  // Country data
  for (const row of data.countries_stat) {
    console.log(row);

    // tr for each row
    const tr = document.createElement("tr");
    // td for each column
    const name = document.createElement("td");
    const cases = document.createElement("td");
    const deaths = document.createElement("td");
    const active = document.createElement("td");

    // data is specific to the API
    name.innerHTML = row.country_name;
    cases.innerHTML = row.cases; 
    deaths.innerHTML = row.deaths; 
    active.innerHTML = row.active_cases; 

    // this builds td's into tr
    tr.appendChild(name);
    tr.appendChild(cases);
    tr.appendChild(deaths);
    tr.appendChild(active);

    // add HTML to container
    resultContainer.appendChild(tr);
  }
})
})
// catch fetch errors (ie ACCESS to server blocked)
.catch(err => {
console.error(err);
const tr = document.createElement("tr");
const td = document.createElement("td");
td.innerHTML = err;
tr.appendChild(td);
resultContainer.appendChild(tr);
});
</script>