Online Country Code Finder Tool Code is a Great tool to find country code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country Code Finder</title>
<!-- Bootstrap CSS for colorful and responsive design -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS for additional styling -->
<style>
body {
background-color: #f8f9fa;
}
.container {
margin-top: 50px;
}
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.btn-custom {
background-color: #007bff;
color: #fff;
}
.btn-custom:hover {
background-color: #0056b3;
}
.result {
font-size: 1.25rem;
color: #28a745;
}
</style>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card p-4">
<h2 class="text-center text-primary mb-4">Country Code Finder</h2>
<form id="countryCodeForm">
<div class="mb-3">
<label for="countryInput" class="form-label">Enter Country Name</label>
<input type="text" id="countryInput" class="form-control" placeholder="e.g., United States">
</div>
<button type="submit" class="btn btn-custom w-100">Find Code</button>
</form>
<div id="resultContainer" class="mt-4 text-center"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- JavaScript for Country Code Finder functionality -->
<script>
// Country codes data
const countryCodes = {
"United States": "+1",
"Canada": "+1",
"United Kingdom": "+44",
"India": "+91",
"Australia": "+61",
"Germany": "+49",
"France": "+33",
"Japan": "+81",
"China": "+86",
"Brazil": "+55",
"South Africa": "+27",
"Russia": "+7",
};
const form = document.getElementById('countryCodeForm');
const countryInput = document.getElementById('countryInput');
const resultContainer = document.getElementById('resultContainer');
// Handle form submission
form.addEventListener('submit', function (e) {
e.preventDefault();
const countryName = countryInput.value.trim();
if (!countryName) {
showResult('Please enter a country name.', 'text-danger');
return;
}
const countryCode = countryCodes[countryName];
if (countryCode) {
showResult(`The country code for <strong>${countryName}</strong> is <strong>${countryCode}</strong>.`, 'result');
} else {
showResult(`Sorry, the country code for <strong>${countryName}</strong> is not available.`, 'text-danger');
}
});
// Display result in the result container
function showResult(message, className) {
resultContainer.innerHTML = `<p class="${className}">${message}</p>`;
}
</script>
</body>
</html>