Javascript Web Page using an API
Breaking down the rapidapi code
<!-- 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