v1.4

alundiak · Oct 21, 2024 · 09bd606 · 09bd606
1 parent 26d6f92
commit 09bd606
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -2,16 +2,53 @@
 
 A place where I can simply COPY flag emoji.
 
+I frequently use emojis of flags for visual representation, and frequently I need bigger size to see better, and also code is sometimes useful.
+Before now I used MacOS note, where I put most frequently used flags emojis from iOS keyboard, and increased by size those which most used.
+Having this small ap, I can always have a handy way to copy emoji and paste elsewhere.
+
+
+## TODO
+
+- Introduce regions.
+- Search by code, eg. `en`, `ua` or by full name of country.
+- Maybe something else, like map so that easier to locate visually.
+- Maybe Small COuntries dedicated section/region.
+- Maybe some sections of flags those which "misleading", eg. Poland and Monaco vs. Indonesia, Singapore and Poland, etc.
+  - Maybe section of flags of different cities, like Polish Katowice flag is very similar to flag of Ukraine.
+- Maybe dedicated section for flags of countries which are NOT yet officially accepted by all other countries. Like flag of Crimea...
+- Maybe section for flags of republics, like in russia. FamilyTreeDNA does it somehow, so I could :)
+
+
 ##
 
-Run
+Locally run
 
 ```sh
 http-server .
 ```
 
+
+## Credits
+
+Inspired by:
+- flags themselves :)
+- https://en.wikipedia.org/wiki/Flags_of_Europe
+- https://en.wikipedia.org/wiki/Flags_of_Asia
+- https://emojipedia.org/flags#grid
+
 ## Tech notes
 
+### API
+
+Using API call is OK for now - https://restcountries.com/v3.1/all
+
+But maybe I will cache results into JSON file.
+
+I will maybe use React/TypeScript, but not sure if worth it.
+
+
+### Other
+
 `.gitignore` sites:
 
 - https://www.toptal.com/developers/gitignore?templates=node,macos,react,typings,webstorm

diff --git a/f2.js → flags.js b/f2.js → flags.js
@@ -29,18 +29,18 @@ function createFlagButtons(flags) {
       const button = document.createElement('span');
       button.textContent = `${codeObject.flag}`;
       button.title = `${codeObject.name}`;
-      button.onclick = () => copyToClipboard(codeObject.flag);
+      button.onclick = () => copyToClipboard(codeObject);
       // const span = document.createElement('span');
       // span.textContent = `${codeObject.name}`;
       container.appendChild(button);
     }
   }
 }
 
-function copyToClipboard(flagEmoji) {
-  navigator.clipboard.writeText(flagEmoji).then(() => {
+function copyToClipboard(codeObject) {
+  navigator.clipboard.writeText(codeObject.flag).then(() => {
     // console.log(`Copied: ${flagEmoji}`);
-    showToast(`Copied: ${flagEmoji}`);
+    showToast(`Copied: ${codeObject.flag} - ${codeObject.name}`);
   }).catch(err => {
     console.error('Failed to copy: ', err);
   });

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
 <head>
   <title>Flags</title>
   <meta charset="utf-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="./index.css" />
 </head>
@@ -14,7 +14,7 @@
 
   <!-- <script type="text/javascript" src="index.js"></script> -->
   <!-- <script src="./f1.js"></script> -->
-  <script src="./f2.js"></script>
+  <script src="./flags.js"></script>
 </body>
 
 </html>