Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Country Guide" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Country Guide" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Country Guide [Source Code]
To get the following HTML, CSS & JS code for the Country Guide project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
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">
<title>Country Guide</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Country Guide</h1>
<div class="search-container">
<input type="text" id="country-name" placeholder="Enter a country name to get the details...">
<button class="searchBtn">Search</button>
</div>
<div class="result"> </div>
</div>
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
font-size: 62.5%;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: blueviolet;
}
.container {
width: 500px;
min-height: 150px;
padding: 20px;
flex-direction: column;
background-color: white;
border-radius: 20px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
h1 {
text-align: center;
font-size: 3rem;
color: blueviolet;
text-transform: uppercase;
text-shadow: 1px 1px black;
margin-bottom: 1.5rem;
}
.search-container {
display: grid;
grid-template-columns: 9fr 3fr;
gap: 2rem;
}
input {
padding: 5px 10px;
font-weight: 500;
border: none;
outline: none;
border-bottom: 2px solid blueviolet;
}
button {
background-color: blueviolet;
border: none;
color: white;
border-radius: 2rem;
cursor: pointer;
}
.result {
margin-top: 10px;
}
.result .flag-img {
display: block;
width: 45%;
min-width: 7.5em;
margin: 1.8em auto 1.2em auto;
}
.result h2 {
font-weight: 600;
color: #222a43;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.8em;
}
.result .data-wrapper {
margin-bottom: 1em;
letter-spacing: 0.3px;
}
.result h4 {
display: inline;
font-weight: 500;
color: #222a43;
}
.result span {
color: #5d6274;
}
.result h3 {
margin-top: 10px;
text-align: center;
font-size: 1.2em;
font-weight: 400;
color: #ff465a;
}
.result .loading {
margin-top: 10px;
margin-bottom: -10px;
color: black;
font-size: 15px;
text-align: center;
}
JavaScript
const inputEl = document.querySelector("#country-name");
const searchBtnEl = document.querySelector(".searchBtn");
const result = document.querySelector(".result");
async function getResults(){
// console.log(data[0]);
// console.log(data[0].capital[0]);
// console.log(data[0].continents[0]);
// console.log(data[0].flags.svg);
// console.log(data[0].name.common);
// console.log(data[0].currencies[0]);
// console.log(data[0].currencies.INR);
// console.log(data[0].currencies.INR.name);
// console.log(Object.keys(data[0].currencies)[0]);
// console.log(data[0].currencies[Object.keys(data[0].currencies)].name);
let countryName = inputEl.value;
try{
result.innerHTML = `<h2 class="loading">results Loading...</h2>`;
let fetchUrl = `https://restcountries.com/v3.1/name/${countryName}?fullText=true`;
let data = await fetch(fetchUrl).then((res) => res.json());
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(error){
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>`;
}
}
}
searchBtnEl.addEventListener("click",getResults);
Generating Download Link...