<!-- 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>
  
  <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>

Constant variables are declared here with keyword const

Key things to know:

  • The document object "result" represents table body in the HTML above.
  • If you want to access any element in an HTML page in JavaScript, you always start by accessing the document object. In this case, we are accessing "result" and defining a "resultContainer"
  • In the code, in following cells, document elements are created and organized for each Joke, each is added to the "resultContainer" as a row in the table body
  • Accessing the api is done using the variables url and options, this is setup to fetch the Covid data from the backend