Code-Blender-7/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Description

As the long title says, this program script is created for properly gathering data from the restcountries.com api.
If you don't know what is called the restcountries.com, it is a open api that is created for getting data regarding all the informations of the countries around the nation.
Why I made it?

Of course that you can find this type of script anywhere on the internet. I just added my own revision. I got this idea from a JavaScript course. So I decided to turn it into reality.
When I was working with the data of the api in JSON, i lost my mind seeing the huge structure of it. As a novice, I spent time to create a script where the value will not come 'undefined'. That way, the user can input any data of a country's name and they don't need to say, "What does undefined mean?"
Also, I created this because I tend to forget things.
DEMO

This is the demo of this script for your interest. It is shared on my twitter here.

TO DO

There are other stuff to revise on this code as it is quite a mess.

 Fix the unnecessary codelines on the script.js and index.html
 Add codelines to ensure that all the languages of the target nation displays


## index.html
<!DOCTYLE html>
<html>
	<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>Demo for extracting info from restcountries v3.1</title>
		<script defer src="script.js"></script>
	</head>
	<body style="background-color:grey"> <!-- changed the background because some nations have their flags in white -->

	<main class="output_field">
	<form action="#">
		<label>Enter the country's name: </label>
		<input id="country_name" type="text" required/>
		<input type="submit" Value="submission" onclick="getDataFromCountries(countries.value)"/>
	</form>

	</main>

</body>

</html>

## script.js
/*
* @Author: Climax
* @Date:   2022-07-20 21:25:15
* @Last Modified by:   Climax
* @Last Modified time: 2022-07-25 22:02:45
*/

// The code will not be able to present the data of an invalid country. The website will appear blank Until the user enters a valid answer.


'use strict'

const countries = document.getElementById('country_name');
const answer = document.querySelector('.output_field')


function getDataFromCountries (country) {

	if (answer.querySelector('.country')) {
		answer.removeChild(answer.querySelector('.country'))
	}

	const request = new XMLHttpRequest();
	request.open('GET', `https://restcountries.com/v3.1/name/${country}`)
	request.send();
	request.addEventListener('load', function() {
		const [data] = JSON.parse(this.responseText); // properly rearrange the data to JSON to read data
		const curriency = `${Object.entries(data.currencies)[0][1].name}, Symbol '${Object.entries(data.currencies)[0][1].symbol}'`

		const html = `
	        <article class="country">
	          <img src="${data.flags.png}" />
	          <div">
	            <p>Country's name: ${data.name.common}</p>
	            <p>Country's region: ${data.region}</p>
	            <p><span>Population 👫: </span>${(+data.population / 1000000).toFixed(1)} million</p>
	            <p><span>Language🗣️: </span>${Object.entries(data.languages)[0]}</p>
	            <p><span>Currency💰: </span>${curriency}</p>
	          </div>
	        </article>
		`;

		answer.insertAdjacentHTML('beforeend', html)
	});

	return false; // halt the website from relaoding again and again (i.e preventDefault)
}
	<!DOCTYLE html>
	<html>
	<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>Demo for extracting info from restcountries v3.1</title>
	<script defer src="script.js"></script>
	</head>
	<body style="background-color:grey"> <!-- changed the background because some nations have their flags in white -->

	<main class="output_field">
	<form action="#">
	<label>Enter the country's name: </label>
	<input id="country_name" type="text" required/>
	<input type="submit" Value="submission" onclick="getDataFromCountries(countries.value)"/>
	</form>

	</main>

	</body>

	</html>
	/*
	* @Author: Climax
	* @Date: 2022-07-20 21:25:15
	* @Last Modified by: Climax
	* @Last Modified time: 2022-07-25 22:02:45
	*/

	// The code will not be able to present the data of an invalid country. The website will appear blank Until the user enters a valid answer.


	'use strict'

	const countries = document.getElementById('country_name');
	const answer = document.querySelector('.output_field')


	function getDataFromCountries (country) {

	if (answer.querySelector('.country')) {
	answer.removeChild(answer.querySelector('.country'))
	}

	const request = new XMLHttpRequest();
	request.open('GET', `https://restcountries.com/v3.1/name/${country}`)
	request.send();
	request.addEventListener('load', function() {
	const [data] = JSON.parse(this.responseText); // properly rearrange the data to JSON to read data
	const curriency = `${Object.entries(data.currencies)[0][1].name}, Symbol '${Object.entries(data.currencies)[0][1].symbol}'`

	const html = `
	<article class="country">
	<img src="${data.flags.png}" />
	<div">
	<p>Country's name: ${data.name.common}</p>
	<p>Country's region: ${data.region}</p>
	<p><span>Population 👫: </span>${(+data.population / 1000000).toFixed(1)} million</p>
	<p><span>Language🗣️: </span>${Object.entries(data.languages)[0]}</p>
	<p><span>Currency💰: </span>${curriency}</p>
	</div>
	</article>
	`;

	answer.insertAdjacentHTML('beforeend', html)
	});

	return false; // halt the website from relaoding again and again (i.e preventDefault)
	}