Country Info Finder (API) | HTML, CSS & JavaScript

Country Info Finder (API) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #21

Project Overview

A Country Info Finder built using HTML, CSS, and JavaScript that fetches and displays real-time country information from a public REST API.
The application allows users to search for countries by name and view details such as the flag, capital, region, and population, while handling both exact and partial search inputs for better usability.

Key Features

Fetches real-time country data using a public API.
Displays country flag, capital, region, and population.
Supports both exact and partial name searches.
Handles user input variations and spelling differences.
Shows clear error messages when a country is not found.
Clean, responsive, and user-friendly interface.
Easy to extend with maps or additional country details.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Country Info Finder</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="country-container">
    <h2>Country Info Finder</h2>

    <input
      type="text"
      id="countryInput"
      placeholder="Enter country name"
    />
    <button onclick="getCountryInfo()">Search</button>

    <div class="result" id="result"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.country-container {
  background: #ffffff;
  width: 360px;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.result {
  margin-top: 15px;
  text-align: left;
}

.result img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 10px;
}

.error {
  color: red;
  text-align: center;
}

Javascript Code

function getCountryInfo() {
  const input = document.getElementById("countryInput").value.trim();
  const result = document.getElementById("result");

  if (!input) {
    result.innerHTML = `<p class="error">Please enter a country name</p>`;
    return;
  }

  result.innerHTML = "Loading...";

  // 1️⃣ Try exact match first
  fetch(`https://restcountries.com/v3.1/name/${input}?fullText=true`)
    .then(res => {
      if (!res.ok) throw new Error("Exact not found");
      return res.json();
    })
    .then(data => showCountry(data[0]))
    .catch(() => {
      // 2️⃣ Fallback to partial match
      fetch(`https://restcountries.com/v3.1/name/${input}`)
        .then(res => {
          if (!res.ok) throw new Error("Not found");
          return res.json();
        })
        .then(data => showCountry(data[0]))
        .catch(() => {
          result.innerHTML = `<p class="error">Country not found</p>`;
        });
    });

  function showCountry(country) {
    result.innerHTML = `
      <img src="${country.flags.svg}" alt="Flag">
      <p><strong>Name:</strong> ${country.name.common}</p>
      <p><strong>Capital:</strong> ${country.capital?.[0] || "N/A"}</p>
      <p><strong>Region:</strong> ${country.region}</p>
      <p><strong>Population:</strong> ${country.population.toLocaleString()}</p>
    `;
  }
}