Video Tutorial:
If you are interested in learning by coding along with a video tutorial rather than reading the blog post you should check out this video here down below. I post new tutorials, tricks and tips on my youtube channel regularly. So be sure to subscribe to my youtube channel to stay updated with these latest resources.
Project Folder Structure:
Before we begin the coding, let us create the project folder structure. We start by creating a project folder called – “Country Guide App”. Within this folder, we have three files index.html, style.css and script.js. They are the HTML document, the stylesheet and the script file.
HTML:
We begin with HTML code. Firstly copy the code below and paste it into your HTML document. This creates the structure of our app.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Country Guide App</title>
<!--Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="search-wrapper">
<input
type="text"
id="country-inp"
placeholder="Enter a country name here..."
/>
<button id="search-btn">Search</button>
</div>
<div id="result"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we need to style these elements to make the project look sleek and beautiful. In order to do so, we use CSS. Now copy the code provided to you below and paste it into your CSS file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #3d64e6;
}
.container {
background-color: #ffffff;
width: 80vw;
max-width: 37.5em;
padding: 3em 2.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 0.62em;
box-shadow: 0 1.25em 1.8em rgba(8, 21, 65, 0.25);
}
.search-wrapper {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1.25em;
}
.search-wrapper button {
font-size: 1em;
background-color: #3d64e6;
color: #ffffff;
padding: 0.8em 0;
border: none;
border-radius: 1.5em;
}
.search-wrapper input {
font-size: 1em;
padding: 0 0.62em;
border: none;
border-bottom: 2px solid #3d64e6;
outline: none;
color: #222a43;
}
#result {
margin-top: 1.25em;
}
.container .flag-img {
display: block;
width: 45%;
min-width: 7.5em;
margin: 1.8em auto 1.2em auto;
}
.container h2 {
font-weight: 600;
color: #222a43;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.8em;
}
.data-wrapper {
margin-bottom: 1em;
letter-spacing: 0.3px;
}
.container h4 {
display: inline;
font-weight: 500;
color: #222a43;
}
.container span {
color: #5d6274;
}
.container h3 {
text-align: center;
font-size: 1.2em;
font-weight: 400;
color: #ff465a;
}
Javascript:
Finally, we need to implement the functionality to make this app work. For that, we make use of javascript. Now copy the code below and paste it into your script file.
let searchBtn = document.getElementById("search-btn");
let countryInp = document.getElementById("country-inp");
searchBtn.addEventListener("click", () => {
let countryName = countryInp.value;
let finalURL = `https://restcountries.com/v3.1/name/${countryName}?fullText=true`;
console.log(finalURL);
fetch(finalURL)
.then((response) => response.json())
.then((data) => {
// console.log(data[0]);
// console.log(data[0].capital[0]);
// console.log(data[0].flags.svg);
// console.log(data[0].name.common);
// console.log(data[0].continents[0]);
// console.log(Object.keys(data[0].currencies)[0]);
// console.log(data[0].currencies[Object.keys(data[0].currencies)].name);
// console.log(
// Object.values(data[0].languages).toString().split(",").join(", ")
// );
result.innerHTML = `
<img src="${data[0].flags.svg}" class="flag-img">
<h2>${data[0].name.common}</h2>
<div class="wrapper">
<div class="data-wrapper">
<h4>Capital:</h4>
<span>${data[0].capital[0]}</span>
</div>
</div>
<div class="wrapper">
<div class="data-wrapper">
<h4>Continent:</h4>
<span>${data[0].continents[0]}</span>
</div>
</div>
<div class="wrapper">
<div class="data-wrapper">
<h4>Population:</h4>
<span>${data[0].population}</span>
</div>
</div>
<div class="wrapper">
<div class="data-wrapper">
<h4>Currency:</h4>
<span>${
data[0].currencies[Object.keys(data[0].currencies)].name
} - ${Object.keys(data[0].currencies)[0]}</span>
</div>
</div>
<div class="wrapper">
<div class="data-wrapper">
<h4>Common Languages:</h4>
<span>${Object.values(data[0].languages)
.toString()
.split(",")
.join(", ")}</span>
</div>
</div>
`;
})
.catch(() => {
if (countryName.length == 0) {
result.innerHTML = `<h3>The input field cannot be empty</h3>`;
} else {
result.innerHTML = `<h3>Please enter a valid country name.</h3>`;
}
});
});
Our Country guide app is now ready. If you have any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Also, I would love to hear from you guys. So if you have any queries, suggestions or feedback do comment below.
Happy Coding!
hello im in indonesian
best project i ever seen
its not fetching the data for india,pakistan,china please fix this becasuse i tried but failed