From 48a98d36eadb3e1a8817a1fc90b53a75c3503451 Mon Sep 17 00:00:00 2001
From: Andrii Lundiak <landike@gmail.com>
Date: Tue, 22 Oct 2024 00:11:18 +0200
Subject: [PATCH] v1.9 (vB => vA)

---
 README.md  | 15 ++++++++++++++-
 flags.js   | 54 +++++++++++++++++++++++++++++++++++-------------------
 index.css  | 30 ++++++++++++------------------
 index.html |  3 +++
 4 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/README.md b/README.md
index 5b89d1f..b3452ad 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,21 @@ But now, having this small app/page, I can always have a handy way on my Desktop
 ![img](./eu.svg)
 
 
+## Data
+
+As of Oct-2024 The [UN](https://en.wikipedia.org/wiki/United_Nations) recognizes `195` countries (`193` member states and `2` observer states).
+
+Public API https://restcountries.com/v3.1/all returns `250` records:
+- with different groups: Sovereign countries, Dependencies and Territories, Disputed or partially recognized region, Autonomous regions, Smaller entities.
+- designated by 5 regions.
+- with field are `unMember`: true/false.
+- there are also `independent`: true/false.
+
+
+
 ## TODO (for sure)
 - Introduce regions.
+- Use `unMember`
 - Fixup Mobile view, although not really needed.
 - Cleanup/Refactor code.
 
@@ -54,7 +67,7 @@ http-server .
 ## Credits
 
 Inspired by:
-- flags themselves :)
+- flags themselves :) since childhood.
 - https://en.wikipedia.org/wiki/Flags_of_Europe
 - https://en.wikipedia.org/wiki/Flags_of_Asia
 - https://emojipedia.org/flags#grid
diff --git a/flags.js b/flags.js
index 0dc9ed0..5c9cf42 100644
--- a/flags.js
+++ b/flags.js
@@ -8,17 +8,19 @@ async function getCountryFlags() {
       const region = country.region;
       composedFlagsData[region] = composedFlagsData[region] || {};
       const code = country.cca2.toLowerCase();
+
       composedFlagsData[region][code] = {
         // vA
-        // name: country.name.common,
-        // flag: country.flag
+        name: country.name.common,
+        flag: country.flag,
+        unMember: country.unMember
 
         // vB
-        [country.flag]: country.name.common
+        // [country.flag]: country.name.common
       };
     });
 
-    return composedFlagsData;
+    return [countries.length, composedFlagsData];
   } catch (error) {
     console.error('Error fetching country flags:', error);
     return {};
@@ -26,39 +28,49 @@ async function getCountryFlags() {
 }
 
 function createFlagButtons(flagsData) {
-  const container = document.getElementById('flags-container');
+  const flagsContainer = document.getElementById('flags-container');
   for (const [region, regionObject] of Object.entries(flagsData)) {
     //  <p> or <span> or <tr>
     for (const [code, codeObject] of Object.entries(regionObject)) {
       const spanElement = document.createElement('span');
 
       // vA
-      // spanElement.textContent = `${codeObject.flag}`;
-      // spanElement.title = `${codeObject.name}`;
+      spanElement.textContent = `${codeObject.flag}`;
+      spanElement.title = `${codeObject.name}`;
+      if (!codeObject.unMember) {
+        spanElement.classList.add('notUnMember');
+      }
 
       // vB
-      const keys = Object.keys(codeObject);
-      const flagEmoji = keys[0];
-      const countryName = codeObject[flagEmoji];
-      spanElement.textContent = `${flagEmoji}`;
-      spanElement.title = `${countryName}`;
+      // const keys = Object.keys(codeObject);
+      // const flagEmoji = keys[0];
+      // const countryName = codeObject[flagEmoji];
+      // spanElement.textContent = `${flagEmoji}`;
+      // spanElement.title = `${countryName}`;
 
       spanElement.onclick = () => copyToClipboard(codeObject);
 
-      container.appendChild(spanElement);
+      flagsContainer.appendChild(spanElement);
     }
   }
 }
 
+function renderCountryFlagsTotal(countryFlagsCount) {
+  const flagsTotal = document.getElementById('flags-count');
+  const spanElement = document.createElement('span');
+  spanElement.textContent = `${countryFlagsCount} country flags here:`;
+  flagsTotal.appendChild(spanElement);
+}
+
 function copyToClipboard(codeObject) {
   // vA
-  // const flagEmoji = codeObject.flag;
-  // const countryName = codeObject.name;
+  const flagEmoji = codeObject.flag;
+  const countryName = codeObject.name;
 
   // vB
-  const keys = Object.keys(codeObject);
-  const flagEmoji = keys[0];
-  const countryName = codeObject[flagEmoji];
+  // const keys = Object.keys(codeObject);
+  // const flagEmoji = keys[0];
+  // const countryName = codeObject[flagEmoji];
 
   navigator.clipboard.writeText(flagEmoji).then(() => {
     // console.log(`Copied: ${flagEmoji}`);
@@ -82,8 +94,12 @@ function showToast(message) {
   }, 2000);
 }
 
-getCountryFlags().then(flagsFromApi => {
+getCountryFlags().then(response => {
+  const [countryFlagsCount, flagsFromApi] = response;
+
   console.log(flagsFromApi);
   // console.log(JSON.stringify(flagsFromApi));
   createFlagButtons(flagsFromApi);
+
+  renderCountryFlagsTotal(countryFlagsCount);
 });
diff --git a/index.css b/index.css
index e3a0867..3beb540 100644
--- a/index.css
+++ b/index.css
@@ -1,32 +1,26 @@
 body {
-  display: flex;
+  /* display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: center; */
   height: 100vh;
   margin: 10px;
 }
 
-/* button {
-  width: 40px;
-  height: 40px;
-  font-size: 30px;
-
-  &:hover {
-    cursor: pointer;
-  }
-} */
+#flags-container {
+  span {
+    font-size: 50px;
 
+    &:hover {
+      cursor: pointer;
+    }
 
-span {
-  /* width: 40px;
-  height: 40px; */
-  font-size: 50px;
-
-  &:hover {
-    cursor: pointer;
+    &.notUnMember {
+      border: 1px dashed red;
+    }
   }
 }
 
+
 .toast {
   position: fixed;
   bottom: 20px;
diff --git a/index.html b/index.html
index e37c82b..8c5a7cc 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,11 @@
 </head>
 
 <body>
+  <h2 id="flags-count"></h2>
+  <p></p>
   <div id="flags-container"></div>
 
+
   <!-- <script type="text/javascript" src="index.js"></script> -->
   <!-- <script src="./f1.js"></script> -->
   <script src="./flags.js"></script>