Country Guide App using HTML, CSS & JavaScript
Introduction
Hello friends, welcome to our new blog post. Today we have created a beautiful web app for you. This project is a country guide app in which you can learn about different countries and get information about them, like you can know the capital of the country, continent, population of that country, currency used in that country and most importantly, which common languages are spoken in that country. You can know all this information through country guide app which is going to be very amazing.
We used HTML, CSS and JavaScript to make this project. And we have kept its design very simple so that users find it easy to see it. And in this app, when you search for the name of a country in the search box to know about it, you also get to see the flag of the country, which is very good. And if you enter the name of an invalid country, an error is displayed there. We have made this country guide app quite advanced, so let’s go now, let us understand the structure of our project step by step.
HTML (index.html)
As you know friends, we are making a country guide app in which we can know about any country, but to make our country guide app, it is very important for us to first create the structure of this app. We have taken the help of HTML to make it, so let’s understand the code of HTML now and friends, we will know more about that code which is important for us to know.
- First of all, we have added the title of our project, which is very important to add <title>Country Guide</title>, which we have added with the help of <title> tag of HTML.
- After this, we have used this link tag to link the css file to html <link rel=”stylesheet” href=”./style.css”> With the help of this you can design your app.
- Friends, there is a way to write HTML code which you can write only inside this <body> tag’s open and this </body> close tag, only then this code will run.
- We have made the design of our Country Guide app very simple. First of all, we have created a container <div class=”container”></div.
- We have created a search box in the main container of our app <div class=”search-wrapper”> and in this we have added the search section and for this we have used input tag <input>.
- Then we have also created a button to search the country <button id=”search-btn”>Search</button> which we have created with an html button tag. You can also create it through input.
- To show the results of the country we searched for, we have created a separate box named result box <div id=”result”></div> This will show the result using JavaScript.
- With its help we can link our javascript file <script src=”script.js”></script>
<title>Country Guide App</title>
<!--Google Fonts -->
<!-- Stylesheet -->
<div class="container">
<div class="search-wrapper">
<button id="search-btn">Search</button>
</div>
<div id="result"></div>
</div>
<!-- Script -->
CSS (Style.css)
Now we have created the structure of our project but just creating the structure is not enough. Now we have to take the help of CSS to make it beautiful and design a good UI. With the help of this we can make the dashboard of our project look good. So, friends, now we have added a link in the HTML which was of a CSS file and a JavaScript file. So now as we write our CSS, in the same way our CSS file will be added to the HTML. So, let’s go. Now let’s understand the important codes of our CSS.
- We used this font in our project font-family: “Poppins”, sans-serif;
- We’ve used box-sizing: border-box; to properly fit all of the body content.
- We have kept the background color of our body as background-color: #3d64d6; which you can change as per your requirement.
- We have set the box header of our Country Guide app to background-color: #ffffff;
- For box width we have used width: 80vw; or for max width we have used max-width: 37.5em; or along with it padding: 3em 2.5em; or border radius we have used border-radius: 0.62em;
- To make the container look good we have used box-shadow so that our app looks good box-shadow: 0 1.25em 1.8em rgba(8, 21, 65, 0.25);
- Now coming to our app’s search box, we have set display: grid; , grid-template-columns: 9fr 3fr; and gap: 1.25em; so that our search box can be set easily.
- Our search button’s background-color: #3d64e6; this is similar to blue and color: #ffffff; similar to white, padding is kept none padding: 0.8em 0; and border is also made none and border radius is kept border-radius: 1.5em;
- Friends, you know that we have created a box to show the flag as well, whose width: 45%; is min-width: 7.5em; and also margin: 1.8em auto 1.2em auto; so that the flag of any country can be displayed properly.
Friends, although you can make this web app even better, but we have kept this app very simple, if you want, you can change its design.
* {
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 (Script.js)
Friends, this is the JavaScript code which is very important for our country guide app. If you make this app with the help of html or CSS but do not add JavaScript, then your app is of no use. In this you cannot know about any country because with the help of JavaScript you can set up the app and know what will happen by clicking which button. So, let’s understand the JavaScript code now.
- First of all we have set our search button with the help of JavaScript, when user enters country name in search box and clicks on search button then that button should be clicked, let searchBtn = document.getElementById(“search-btn”); and it will work only when you add the id of the button in JavaScript code
- Just like we made our button work with the help of javascript, similarly we have made our search box work. When the user adds the correct country name, it will be searched. let countryInp = document.getElementById(“country-inp”); You have to add the correct id name.
- We have used JavaScript’s event listener to make this work properly addEventListener(“click”, () => {
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 decoding="async" 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>`;
}
});
});
Output:
Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.
Custom Music Player with Playlist Using JavaScript Introduction Hello friends , welcome to another new blog. Hope you all are doing good. …
Country Guide App using HTML, CSS & JavaScript Introduction Hello friends, welcome to our new blog post. Today we have created a …
Personal Finance Manager using java swing with complete source code Introduction: The Personal Finance Manager is a Java-based application designed to help …
Gym Website Using HTML, CSS, and JavaScript Introduction Hello friends, all of you are welcome to today’s beautiful project. Today we have …
Get Huge Discounts
More Python Projects
