Build a country Info App with Javascript.

avatar

cutryapp1.png

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

That will be all for now. Thanks for reading.

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

proofofbrain neoxian vyb ctp cent hive-engine bdc
0
0
0.000
1 comments