App in html to display any country's flag

Hello everyone! I'm pleased to introduce an app in html css and js that displays any country's flag based on user input, the app works only with country codes for example USA will be US in the user input field due to api limitation, for the complete list of country codes pls visit (https://flagcdn.com/en/codes.json)

I've created three files HTML JS and CSS, CSS named style.css and JS is script.js and the HTML is index.html

First JS code as the following:

document.getElementById('getFlagBtn').addEventListener('click', function() {
    const countryName = document.getElementById('countryInput').value.trim();

    if (countryName === "") {
        alert("Please enter a country name.");
        return;
    }

    // Normalize the country name (convert to lowercase and replace spaces with dashes)
    const formattedCountryName = countryName.toLowerCase().replace(/\s+/g, '-');

    // Fetch flag image from the Flag CDN API
    const flagUrl = `https://flagcdn.com/w320/${formattedCountryName}.png`;

    // Check if the image exists (simple check by testing the image URL)
    const flagImage = new Image();
    flagImage.onload = function() {
        document.getElementById('flagDisplay').innerHTML = `<img src="${flagUrl}" alt="Flag of ${countryName}" />`;
    };
    flagImage.onerror = function() {
        alert("Flag not found. Please check the country name.");
        document.getElementById('flagDisplay').innerHTML = ''; // Clear any previous flag
    };

    // Start loading the image
    flagImage.src = flagUrl;
});

As for the html check the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Country Flag Finder</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Country Flag Finder</h1>
        <input type="text" id="countryInput" placeholder="Enter country name" />
        <button id="getFlagBtn">Get Flag</button>
        <div id="flagDisplay">
            <!-- The flag image will be displayed here -->
        </div>
    </div>

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

Finally for the CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
}

h1 {
    color: #333;
}

#countryInput {
    padding: 10px;
    margin-top: 10px;
    width: 80%;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}

#flagDisplay {
    margin-top: 20px;
}

img {
    width: 150px;
    height: auto;
}

I hope you enjoy it and thank you so much!.

Blog

App in html to display any country's flag

Aj

Join Our Newsletter. No Spam, Only the good stuff.

Related