Hello guys,
This is another tutorial on how to build a mini-application. In this post, I used a public API and fetch data of all countries in the world. This is the link to the website for the API. https://restcountries.com/ You can play with it if you have time.
Without further ado, let's start.
The file below is the HTML.
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Country app</title>
</head>
<body>
<div class="container">
<div class="search-container">
<input type="text" name="" id="country-name" placeholder="Enter a country name.">
<button id="btn"> Search</button>
</div>
<div id="data-result"></div>
</div>
<script src="main.js"></script>
</body>
</html>
```
The codes below is for the styling of the application.
```
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #1a5252;
height: 100vh;
}
.container {
width: 70%;
max-width: 35em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-color: #fff;
padding: 2em;
}
.search-container {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1em;
}
.search-container input {
font-size: 20px;
padding: 0 20px ;
border: none;
border-bottom: 5px #1a5252 solid ;
outline: none;
color: #1a5252;
}
.search-container button {
font-size: 16px;
background-color: #1a5252;
color: #fff;
padding: 20px 0px;
border: none ;
}
#data-result {
margin-top: 20px;
}
.country-flag {
display: block;
width: 40%;
}
.data-div p {
padding-top: 20px;
font-size: 20px;
}
```
This is where the major work is. As normal, I used the querySelector to get the HTML elements. Then I got the data from the input in the hmtl with the `let countryNa = countryInput.value;`. Then the `countryURL` is the variable for the API and I concatenated the name of the country from the `countryNa` in the API.
I fetched the data from the API and display them on the HTML page with the element property, innerHTML. Then I used the catch statement to create a condition for empty input and wrong country names.
```
let searchButton = document.querySelector("#btn");
let countryInput = document.querySelector("#country-name");
let dataResult = document.querySelector("#data-result")
searchButton.addEventListener("click", ()=> {
let countryNa = countryInput.value;
let countryURL = `https://restcountries.com/v3.1/name/${countryNa}?fullText=true`;
```
```
fetch(countryURL)
.then((res) => res.json())
.then((data) => {
console.log(data)
dataResult.innerHTML = `
<img class="country-flag" src="${data[0].flags.svg}"/>
<div class="data-div">
<p>Capital: ${data[0].capital[0]}</p>
<p>Area: ${data[0].area}</p>
<p>Continent: ${data[0].continents[0]}</p>
<p>Population: ${data[0].population}</p>
<p>Subregion: ${data[0].subregion}</p>
<p>Time zone: ${data[0].timezones[0]}</p>
<p>Currency: ${Object.keys(data[0].currencies)[0]}</p>
<p>Currency Name: ${data[0].currencies[Object.keys(data[0].currencies)].name}</p>
<p>Languages: ${Object.keys(data[0].languages).toString().split(",").join(",")}</p>
</div>
`
})
.catch(()=> {
if(countryNa == 0 ){
dataResult.innerHTML = `<h3>Cannot be empty</h3>`;
}else {
dataResult.innerHTML = `<h3>Pls enter a valid country</h3>`
}
});
});
```
## Result
https://youtu.be/p-4zCVU6-Do
That will be all for now. Thanks for reading.
<sub>Michael B, A.K.A Tykee, I am a software developer, writer and blockchain enthusiast. I write about finance, programming, tech and lifestyle. My contents are my opinions</sub>
hiveblocks