HomeJavascriptCountry Guide App | Javascript API Project

Country Guide App | Javascript API Project

Hello everyone. Welcome to today’s tutorial. In today’s tutorial, we will create a country guide app. To build this app we need HTML, CSS and Vanilla javascript. Apart from this, we make use of ‘Rest Countries’ API.
 
This app consists of a search bar. The user enters the name of the country to be searched for in this input field and clicks on the search button. On hitting search, we display a list of common information about that country including an image of the country’s flag.
 
In case the user enters a wrong spelling, we show an error message asking the user to enter a valid name. Also if the user clicks on the search button while the input field is empty, we display another error message that asks the user to fill the input field before submitting it.
 
If you have a basic idea of how API works or basic knowledge of fetch(), this project would be perfect for you. If you are looking for other javascript projects that use API, you can check out this playlist here. It has a bunch of tutorials that use a variety of APIs to build beautiful apps.

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!

RELATED ARTICLES

3 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

2 + 3 =

Most Popular