<h2>Weekly Coding Challenge #15 - Instant Search</h2>
<input type="text" id="search" placeholder="Search for a Country" />
<div id="results"></div>

<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read how I created this and how you can join the challenge
		<a target="_blank" href="https://www.florin-pop.com/blog/2019/06/vanilla-javascript-instant-search/">here</a>
	</p>
</footer>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,500&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	min-height: 100vh;
	font-family: 'Roboto', sans-serif;
	margin: 0 0 50px;
}

.countries {
	padding: 0;
	list-style-type: none;
	width: 480px;
}

.country-item {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 10px;
	margin: 10px 0;
}

.country-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.country-flag {
	width: 40px;
}

.country-name {
	flex: 2;
	font-weight: normal;
	letter-spacing: .5px;
	margin: 0 5px;
	text-align: center;
}

.country-info {
	border-left: 1px solid #aaa;
	color: #777;
	padding: 0 15px;
	flex: 1;
}

.country-population {
	font-weight: 300;
	line-height: 24px;
	margin: 0;
	margin-bottom: 12px;
}

.country-population-text {
	font-weight: 300;	
	letter-spacing: 1px;
	margin: 0;
	text-transform: uppercase;
}

input {
	font-family: 'Roboto', sans-serif;
	border-radius: 3px;
	border: 1px solid #ddd;
	padding: 15px;
	width: 480px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
	letter-spacing: 0.5px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}
const search_input = document.getElementById('search');
const results = document.getElementById('results');

let search_term = '';
let countries;

const fetchCountries = async () => {
	countries = await fetch('https://restcountries.eu/rest/v2/all?fields=name;population;flag').then(
		res => res.json()
	);
}

const showCountries = async () => {
	// clearHTML
	results.innerHTML = '';
	
	// getting the data
	await fetchCountries();
	
	// creating the structure
	const ul = document.createElement("ul");
	ul.classList.add('countries');
	
	countries.filter(
		country => country.name.toLowerCase().includes(search_term.toLowerCase())
	).forEach(country => {
		const li = document.createElement('li');
		const country_flag = document.createElement('img');
		const country_name = document.createElement('h3');
		const country_info = document.createElement('div');
		const country_population = document.createElement('h2');
		const country_popupation_text = document.createElement('h5');
		
		li.classList.add('country-item');
		country_info.classList.add('country-info');
		
		country_flag.src = country.flag;
		country_flag.classList.add('country-flag');
		
		country_name.innerText = country.name;
		country_name.classList.add('country-name');
		
		country_population.innerText = numberWithCommas(country.population);
		country_population.classList.add('country-population');
		country_popupation_text.innerText = 'Population';
		country_popupation_text.classList.add('country-population-text');
		
		country_info.appendChild(country_population);
		country_info.appendChild(country_popupation_text);
		
		li.appendChild(country_flag);
		li.appendChild(country_name);
		li.appendChild(country_info);
		ul.appendChild(li);
	})
	results.appendChild(ul);
}

// display initial countries
showCountries();

search_input.addEventListener('input', (e) => {
	search_term = e.target.value;
	// re-display countries again based on the new search_term
	showCountries();
});

// From StackOverflow https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.