Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/AndresLopezCorrales/Countries-WebPage/llms.txt

Use this file to discover all available pages before exploring further.

The country information panel appears to the right of the map (or below it on mobile) whenever a country is selected — either by clicking a shape on the SVG map or by submitting a search query. It is rendered by ApiConsumer::menu(), which calls getSearchBarInfo() to fetch and decode the REST Countries API v3.1 response, then delegates individual field extraction to GetAttributesController. Each method in that controller uses isset() guards so that missing fields degrade gracefully to an empty string rather than causing a PHP error.

​
Data fields

The following fields are extracted from the API response array and displayed in the panel. All values come from the first element of the response array ($data[0]), since the /v3.1/name/ endpoint can return multiple matches but Country-Click always uses the first result.
​
name.common
string
The country’s common name, displayed as a large <h1> heading at the top of the panel. Extracted by GetAttributesController::getCommonName() from $data[0]['name']['common']. Example: Germany.
​
name.official
string
The country’s official name, displayed as a smaller <h2> subtitle directly beneath the common name. Extracted by GetAttributesController::getOfficialName() from $data[0]['name']['official']. Example: Federal Republic of Germany.
​
flags.png
string
A URL pointing to a PNG image of the country’s flag, hosted by the REST Countries CDN. Rendered as an <img> element below the name headings. Extracted by GetAttributesController::getFlag() from $data[0]['flags']['png']. Example: https://flagcdn.com/w320/de.png.
​
capital[0]
string
The primary capital city of the country. Extracted by GetAttributesController::getCapital() from $data[0]['capital'][0]. Only the first capital in the array is shown. Example: Berlin.
​
population
number
The country’s total population as an integer. Extracted by GetAttributesController::getPopulation() from $data[0]['population']. Displayed as a raw number with no formatting. Example: 83240525.
​
languages
object
A key-value map of language codes to language names (e.g., {"deu": "German"}). Extracted by GetAttributesController::getLanguage(), which iterates over all values and returns them as an array. ApiConsumer::menu() then joins the array into a comma-separated string using implode(", ", $idiomas). Example: German (for a single language) or French, German, Italian, Romansh (for multiple).
​
timezones[0]
string
The first timezone in the country’s timezone list. Extracted by GetAttributesController::getTimezone() from $data[0]['timezones'][0]. Countries that span multiple timezones only show the first entry. Example: UTC+01:00.
​
region
string
The continent or world region the country belongs to. Extracted by GetAttributesController::getRegion() from $data[0]['region']. The valid values that Country-Click handles are: Africa, Americas, Asia, Europe, and Oceania. This value is also used to select the regional illustration image.

​
Region illustrations

Alongside the region name, the panel displays a regional illustration image. ApiConsumer::menu() uses a PHP switch statement on the region string to map each value to a local image file:
ApiConsumer.php
switch($region) {
    case "Africa":   $imagenReg = "./resources/img/africa.png"; break;
    case "Americas": $imagenReg = "./resources/img/america.png"; break;
    case "Asia":     $imagenReg = "./resources/img/asia.png"; break;
    case "Europe":   $imagenReg = "./resources/img/europe.png"; break;
    case "Oceania":  $imagenReg = "./resources/img/oceania.png"; break;
}
The five image files — africa.png, america.png, asia.png, europe.png, and oceania.png — are served from the ./resources/img/ directory relative to the document root. If the API returns a region string that does not match any case, the $imagenReg variable remains unset and no illustration is rendered.

​
Multiple languages

Many countries have more than one official language. GetAttributesController::getLanguage() handles this by iterating over all entries in the languages object and collecting the display names (values, not keys) into a PHP array:
GetAttributesController.php
function getLanguage($data) {
    $idiomas = [];
    if (isset($data[0]['languages'])) {
        $languages = $data[0]['languages'];

        foreach ($languages as $key => $value) {
            $idiomas[] = $value;
        }
        return $idiomas;
    } else {
        return "";
    }
}
The returned array is then joined in ApiConsumer::getSearchBarInfo() using implode(", ", $idiomas) before being passed to menu(). For example, Switzerland returns French, German, Italian, Romansh because its API response contains four entries in the languages object.

​
Rendered HTML structure

The panel is generated entirely in PHP by ApiConsumer::menu() using an echo statement. The simplified structure output for a sample country looks like this: 
<div class='container-info flex flex-col justify-center items-center p-8 text-brown-super-hard'>
  <div class='text-center p-1'>
    <h1 class='text-5xl font-extrabold'>Germany</h1>
    <h2 class='text-[1rem] font-thin'>Federal Republic of Germany</h2>
    <img src='https://flagcdn.com/w320/de.png'>
  </div>
  <div class='flex flex-col justify-center items-center p-1'>
    <strong>Capital</strong>  <p>Berlin</p>
    <strong>Population</strong> <p>83240525</p>
    <strong>Languages</strong> <p>German</p>
    <strong>Timezone</strong> <p>UTC+01:00</p>
  </div>
  <div class='flex flex-col justify-center items-center p-1'>
    <strong>Region</strong> <p>Europe</p>
    <img src='./resources/img/europe.png'>
  </div>
</div>
The outer container-info <div> uses Tailwind’s flex column layout with centered alignment and padding. The name and flag section sits at the top, followed by the factual data fields (capital, population, languages, timezone), and finally the region name and illustration at the bottom.
If the API returns no data for a particular field — for example, some dependent territories have no listed capital — that field displays as empty in the panel. Every method in GetAttributesController includes an isset() check and returns an empty string "" as a fallback, so the label (e.g., Capital) will still appear but its accompanying <p> tag will be blank.

Build docs developers (and LLMs) love

Get started for freeTalk to us