Fetch COVID Data with JavaScript and REST Countries API

Working With The Covid Graph API using JavaScript

Modern websites rely on live data. Users expect instant updates without refreshing the page. JavaScript and public APIs make this process simple. This guide shows how to load country data from an API, then display a COVID statistics graph based on user selection.

You build a small project using HTML, CSS, and JavaScript. The page loads a list of countries. A user selects a country. The browser displays a graph for that location.

Project overview

This project performs three core tasks.

  •  Load country data from an API
  • Display the countries in a dropdown list
  • Show a COVID graph after selection
File structure

Create a folder and add three files.

  • index.html
  • app.js
  • style.css
Tutorial

Step 1. Create the HTML layout

The HTML file defines the structure of the page. It includes a dropdown menu and an image container.

Code for index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Covid Graph API</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<h1>Covid Graph API Data</h1>
<select id=”short-code” class=”browser-default”></select>
<div id=”results”>
<img class=”materialboxed”>
</div>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
<script src=”app.js”></script>
</body>
</html>
Important elements
  • The select element holds country names
  • The image element displays the graph
  • External scripts handle styling and behavior
Step 2. Add JavaScript to fetch country data

JavaScript connects to the REST Countries API. The script retrieves country data in JSON format and fills the dropdown list.

Code for app.js
const selectElem = document.querySelector(‘#short-code’);
const resDiv = document.querySelector(‘#results’);
const boxedClass = document.querySelector(‘.materialboxed’);
M.Materialbox.init(boxedClass, {})
getCode();
function getCode() {
fetch(‘https://restcountries.com/v3.1/all’)
.then(res => {
return res.json();
})
.then(data => {
generateHTML(data)
})
.catch(err => {
console.log(`There was an error ${err}`)
})
}
function generateHTML(ourData) {
let output = “<option selected disabled>Select any country</option>”;
ourData.forEach(country => {
output += `<option value=”${country.cca2}”>${country.name.common}</option>`;
})
selectElem.innerHTML = output;
}
selectElem.addEventListener(‘change’, e => {
const countryCode = e.target.value;
const imgTag = document.querySelector(‘img’);
let now = new Date().getTime();
if (countryCode) {
let imgUrl = `https://corona.dnsforfamily.com/graph.png?c=${countryCode}&time=${now}`;
imgTag.setAttribute(‘src’, imgUrl);
}
});

How the script works

  • fetch sends a request to the API
  • The response converts into JSON
  • A loop creates dropdown options
  • An event listener detects selection
  • The image updates based on the selected country
Step 3. Style the layout with CSS

CSS controls width and spacing. The image stays responsive on different screen sizes.

Code for style.css
#results{
width:800px;
max-width: 80%;
margin:0 auto;
margin-top: 30px;
}
#results img{
width:100%;
height:auto;
}
Testing the project

Follow these steps.

  • Save all files in the same folder
  • Open index.html in a browser
  • Wait for the country list to load
  • Select a country
  • View the graph update
Ideas for improvement
  • Add a loading indicator during data requests
  • Sort countries alphabetically
  • Add a search field for faster selection
  • Display total cases and deaths
  • Store recent selections in local storage

 

account_box Author:

date_range Date: 22nd, March 2026

access_time Time: 5:47 pm

remove_red_eye Views: 20 Views

Advertisement

share