Skip to content

Instantly share code, notes, and snippets.

@cferdinandi

cferdinandi/flag-emoji.html Secret

Last active November 28, 2023 21:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cferdinandi/42c6fea6a4b8493d7777adcda5e7beb5 to your computer and use it in GitHub Desktop.
Save cferdinandi/42c6fea6a4b8493d7777adcda5e7beb5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flag-emoji.html
<!DOCTYPE html>
<html>
<head>
<title>Flag Emoji</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;
}
</style>
</head>
<body>
<h1>Flag Emoji</h1>
<!-- United States -->
<flag-emoji code="us"></flag-emoji>
<!-- Japan -->
<flag-emoji code="jp"></flag-emoji>
<!-- Mexico -->
<flag-emoji code="mx"></flag-emoji>
<script>
customElements.define('flag-emoji', class extends HTMLElement {
/**
* Create a new instance
*/
constructor () {
super();
this.textContent = this.getFlagEmoji(this.getAttribute('code'));
}
/**
* Get the flag emoji for the country
* @link https://dev.to/jorik/country-code-to-flag-emoji-a21
* @param {String} countryCode The country code
* @return {String} The flag emoji
*/
getFlagEmoji (countryCode) {
let codePoints = countryCode.toUpperCase().split('').map(char => 127397 + char.charCodeAt());
return String.fromCodePoint(...codePoints);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment