Remember to save the HTML code in an HTML file (e.g., index.html), the CSS code in a CSS file (e.g., styles.css), and the JavaScript code in a JS file (e.g., script.js) in the same directory. Then, you can open the HTML file in a web browser to use the Country Code Finder tool.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Country Code Finder</title>
<link rel="stylesheet" type="text/css" href="body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
width: 400px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
h1 {
text-align: center;
color: #333;
}
.input-container {
margin-bottom: 20px;
}
#country-input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 16px;
}
#search-button {
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: #fff;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
#search-button:hover {
background-color: #45a049;
}
#result {
padding: 10px;
background-color: #f2f2f2;
border-radius: 3px;
}
">
</head>
<body>
<div class="container">
<h1>Country Code Finder</h1>
<div class="input-container">
<input type="text" id="country-input" placeholder="Enter country name">
<button id="search-button">Search</button>
</div>
<div id="result"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="$(document).ready(function() {
$('#search-button').click(function() {
var countryName = $('#country-input').val();
// Make API request to retrieve country code
$.ajax({
url: 'https://restcountries.com/v2/name/' + countryName + '?fullText=true',
type: 'GET',
success: function(response) {
if (response.length > 0) {
var countryCode = response[0].alpha2Code;
var countryName = response[0].name;
$('#result').html('Country Name: ' + countryName + '<br>Country Code: ' + countryCode);
} else {
$('#result').html('Country not found!');
}
},
error: function() {
$('#result').html('Error occurred while searching for country!');
}
});
});
});
"></script>
</body>
</html>
No comments:
Post a Comment