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 SVG world map is the primary navigation surface in Country-Click. It is embedded as inline SVG directly in the PHP page (index.php), sitting inside a responsive flex container alongside the country info panel. Each clickable country is represented by an <a> element with the CSS class country and an xlink:title attribute that holds the country’s English name. Clicking any highlighted region sends that name to the PHP backend, which queries the REST Countries API and renders the result.

​
How map clicks work

When the page loads, getname.js selects every element with the class .country using document.querySelectorAll() and attaches a click event listener to each one. When a user clicks a country shape, the listener:
  1. Calls event.preventDefault() to stop the browser from following the xlink:href="#" link.
  2. Reads the xlink:title attribute value from the clicked element — this is the country’s English name.
  3. Dynamically creates a hidden HTML <form> with method="POST" and a single hidden <input> field named titulo, setting its value to the country name.
  4. Appends the form to document.body and immediately calls form.submit(), sending the country name to the PHP backend via POST.
On the server side, GetNameController::clickCountries() reads $_POST['titulo'] to retrieve the submitted name. If $_POST['titulo'] is not set (no map click occurred), the method returns an empty string.
getname.js
var enlacesSvg = document.querySelectorAll(".country");

enlacesSvg.forEach(function (enlaceSvg) {
    enlaceSvg.addEventListener("click", function (event) {
        event.preventDefault();

        var titulo = enlaceSvg.getAttribute("xlink:title");

        var form = document.createElement("form");
        form.style.display = "none";
        form.method = "POST";

        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "titulo";
        input.value = titulo;

        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    });
});

​
Supported countries

The inline SVG includes <a class="country"> elements for major countries and territories across all continents. The following representative examples are drawn directly from the xlink:title values present in the SVG:
RegionCountries
AmericasGreenland, Canada, United States of America, Brazil, Argentina, Chile, Colombia, Venezuela, Peru, Bolivia, Paraguay, Uruguay, Mexico
EuropeRussia, Norway, Finland, Sweden, United Kingdom, France, Spain, Germany, Italy, Poland
AfricaNigeria, Ethiopia, South Africa, Angola, Namibia, Zambia, Zimbabwe, Mozambique, Madagascar, Botswana, Malawi
AsiaChina, India, Japan, Indonesia, East Timor
OceaniaAustralia, New Zealand
If a country you want isn’t highlighted on the map, use the search bar instead — it accepts any country in the REST Countries database by English name or official name.
Not all small territories and island nations are individually clickable shapes in the SVG. Micro-states, overseas territories, and other compact regions may not have a distinct clickable area. The search bar covers the full REST Countries dataset regardless of map coverage.

​
Visual styling

Clickable countries use the CSS class .country, which is styled with Tailwind utility classes: 
fill-brown-hard hover:fill-brown-medium hover:scale-[1.003] transition-transform duration-300
This gives each country shape a warm dark-brown fill at rest. On hover, the fill lightens to a medium brown and the shape scales up very slightly (1.003), providing a subtle but clear interactive affordance. The transition-transform duration-300 class ensures the scale change animates smoothly over 300 ms. Countries that are part of the SVG but do not carry the country class are rendered as static decorative paths and do not respond to click events.

Build docs developers (and LLMs) love

Get started for freeTalk to us