initial public

1 files changed, 119 insertions, 0 deletions

diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..3fc34aa
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,119 @@
+(() => {
+  const $fetch = document.getElementById("countries"),
+        $fragment = document.createDocumentFragment();
+
+  async function getData($url, $method) {
+    try {
+      const res = await fetch( $url, {
+        method: $method,
+      });
+
+      let data = await res.json();
+
+      if (!res.ok) throw { status: res.status, statusText: res.statusText };
+      return data;
+
+    } catch (err) {
+      console.log(err);
+      let message = err.statusText || "Unexpected error";
+      let data = `Error ${err.status}: ${message}`;
+      return data;
+    }
+  };
+
+  // Run getData
+  getData('https://restcountries.com/v3.1/all', 'GET').then( (data) => {
+    data.forEach((el) => {
+      const $country = document.createElement("article");
+      $country.classList.add("item-box");
+      $country.innerHTML = `<div class="item-country">
+      <a class="thumbnail-box" title="${el.name.common}">
+        <div class="thumbnail">
+          <img class="thumbnail-img" alt="&#x20;" src="${el.flags.png}">
+        </div>
+      </a>
+      <h4 class="title"><a href="#simpleModal_${el.name.common}" data-target="simpleModal_${el.name.common}" data-toggle="modal" title="${el.capital}">${el.capital}</a></h4>
+      <address title="${el.name.common}"><b><a href="#simpleModal_${el.name.common}" data-target="simpleModal_${el.name.common}" data-toggle="modal">${el.name.common}</a></b></address>
+      <div class="stats horizontal-stats">
+        <span>Population</span>
+        <div>${el.population}</div>
+      </div>
+
+      <!-- Modal -->
+      <div id="simpleModal_${el.name.common}" class="modal">
+        <div class="modal-window">
+        <div class="close-modal" data-dismiss="modal">&times;</div>
+          <table id="jslicense-labels1" class="table">
+            <caption>General information for Country - ${el.name.common}</caption>
+              <thead>
+                <tr>
+                  <th>Country</th>
+                  <th>Capital</th>
+                  <th>Region</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td data-label="Country">${el.name.common}</td>
+                  <td data-label="Capital">${el.capital}</td>
+                  <td data-label="Region">${el.region}</td>
+                </tr>
+              </tbody>
+          </table>
+          <button data-dismiss="modal" class="btn-close">Close</button>
+        </div>
+      </div>
+</div>`;
+      $fragment.appendChild($country);
+    });
+    $fetch.appendChild($fragment);
+  });
+
+  // Modal
+  document.addEventListener('click', function (e) {
+    e = e || window.event;
+    let target = e.target || e.srcElement;
+    if (target.dataset.target && target.dataset.target !== '') {
+      let modalId = target.dataset.target;
+      document.getElementById(modalId).classList.add('open');
+      e.preventDefault();
+    }
+    // }
+    if (target.dataset.iframe && target.dataset.iframe !== '' && target.dataset.src && target.dataset.src !== '') {
+      document.getElementById(target.dataset.iframe).src = target.dataset.src;
+    }
+    if (target.dataset.dimensions && target.dataset.dimensions !== "") {
+      // alert(target.dataset.dimensions);
+      document.querySelector('#' + target.dataset.target + ' .modal-window').setAttribute('style', target.dataset.dimensions);
+      if (target.dataset.iframe && target.dataset.iframe !== '' && target.dataset.src && target.dataset.src !== '') {
+        document.getElementById(target.dataset.iframe).setAttribute('style', target.dataset.dimensions);
+      }
+      document.querySelector('#' + target.dataset.target + ' .modal-window').setAttribute('style', target.dataset.dimensions);
+    }
+    if (target.dataset.reload && target.dataset.reload === '1') {
+      document.querySelector('.close-modal').dataset.reload = 1;
+    }
+    // Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
+    if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
+      if (target.dataset.reload && target.dataset.reload === '1') {
+        parent.location.reload(true);
+        let modal = document.querySelector('[class="modal open"]');
+        modal.classList.remove('open');
+        e.preventDefault();
+      } else {
+        let modal = document.querySelector('[class="modal open"]');
+        modal.classList.remove('open');
+        e.preventDefault();
+      }
+    }
+  }, false);
+
+  document.body.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if (document.querySelector('.close-modal')) {
+        document.querySelector('.close-modal').click();
+      }
+    }
+  });
+
+})();