Calculator Tools Calculator Tools
Create

Flag Name Calculator

Aug 12, 2026

About this app

Calculate the flag name based on given countries

Flag Name Calculator Flag Name Calculator Country 1 Country 2 Country 3 Country 4 Country 5 Country 6 Calculate

Related apps

Put this on your site

Source

                    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flag Name Calculator</title>
<meta name="description" content="Calculate the flag name based on given countries">
<meta name="keywords" content="flag name, calculator, countries">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
}

.container {
margin-top: 30px;
}

.card {
border: none;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
background-color: #fff;
padding: 20px;
}

.card-header {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
padding: 10px 0;
}

.card-title {
margin-bottom: 10px;
font-weight: bold;
color: #333;
font-size: 24px;
}

.card-body {
margin-top: 20px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
font-weight: bold;
color: #333;
}

.form-group input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 16px;
}

.form-group button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

.result {
margin-top: 20px;
font-weight: bold;
color: #333;
font-size: 18px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="card">
<div class="card-header">
<h2 class="card-title">Flag Name Calculator</h2>
</div>
<div class="card-body">
<div class="form-group">
<label for="country1">Country 1</label>
<input type="text" id="country1" placeholder="Enter country 1">
</div>
<div class="form-group">
<label for="country2">Country 2</label>
<input type="text" id="country2" placeholder="Enter country 2">
</div>
<div class="form-group">
<label for="country3">Country 3</label>
<input type="text" id="country3" placeholder="Enter country 3">
</div>
<div class="form-group">
<label for="country4">Country 4</label>
<input type="text" id="country4" placeholder="Enter country 4">
</div>
<div class="form-group">
<label for="country5">Country 5</label>
<input type="text" id="country5" placeholder="Enter country 5">
</div>
<div class="form-group">
<label for="country6">Country 6</label>
<input type="text" id="country6" placeholder="Enter country 6">
</div>
<button id="calculate-btn">Calculate</button>
<div class="result" id="result"></div>
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
$('#calculate-btn').on('click', function () {
var country1 = $('#country1').val();
var country2 = $('#country2').val();
var country3 = $('#country3').val();
var country4 = $('#country4').val();
var country5 = $('#country5').val();
var country6 = $('#country6').val();

var flagName = calculateFlagName(country1, country2, country3, country4, country5, country6);

$('#result').text('The flag name is ' + flagName);
});

function calculateFlagName(country1, country2, country3, country4, country5, country6) {
var flagName = '';
flagName += getCountryFlag(country1);
flagName += getCountryFlag(country2);
flagName += getCountryFlag(country3);
flagName += getCountryFlag(country4);
flagName += getCountryFlag(country5);
flagName += getCountryFlag(country6);

return flagName;
}

function getCountryFlag(country) {
switch (country) {
case 'Peru':
return '🇵🇪';
case 'Brazil':
return '🇧🇷';
case 'Mexico':
return '🇲🇽';
case 'Wales':
return '🏴󠁧󠁢󠁷󠁬󠁳󠁿';
case 'Albania':
return '🇦🇱';
case 'Bulgaria':
return '🇧🇬';
default:
return '';
}
}
});
</script>
</body>
</html>