@todojs/

03-template-wc-countries

HTML, CSS, JS

No description

fork
loading
Files
  • index.html

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.9285724443353673","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5UZW1wbGF0ZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+Cjx0ZW1wbGF0ZSBpZD0idGFibGUiPgogIDx0YWJsZT4KICAgIDx0aGVhZD48dHI+PHRoPkZsYWc8L3RoPjx0aD5Db3VudHJ5PC90aD48L3RyPjwvdGhlYWQ+CiAgICA8dGJvZHk+PC90Ym9keT4KICA8L3RhYmxlPgo8L3RlbXBsYXRlPgo8dGVtcGxhdGUgaWQ9InJvdyI+CiAgPHRyPjx0ZD48L3RkPjx0ZD48L3RkPjwvdHI+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CiAgY2xhc3MgV0NDb3VudHJpZXMgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICBjb25zdHJ1Y3RvciAoKSB7CiAgICAgIHN1cGVyICgpOwogICAgICB0aGlzLmF0dGFjaFNoYWRvdyAoe21vZGUgOiAnb3Blbid9KTsKICAgICAgY29uc3QgcGF0aCAgPSAnaHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL2hqbmlsc3Nvbi9jb3VudHJ5LWZsYWdzL21hc3Rlcic7CiAgICAgIGNvbnN0IHRhYmxlICAgICAgID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignI3RhYmxlJykuY29udGVudC5jbG9uZU5vZGUodHJ1ZSk7CiAgICAgIGNvbnN0IHRib2R5ICAgICAgID0gdGFibGUucXVlcnlTZWxlY3RvciAoJ3Rib2R5Jyk7CiAgICAgIGNvbnN0IHJvd1RlbXBsYXRlID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvciAoJyNyb3cnKTsKICAgICAgdGhpcy5zaGFkb3dSb290LmFwcGVuZENoaWxkICh0YWJsZSk7CiAgICAgIGZldGNoIChgJHtwYXRofS9jb3VudHJpZXMuanNvbmApCiAgICAgICAgLnRoZW4gKHJlc3BvbnNlID0+IHsKICAgICAgICAgIGlmIChyZXNwb25zZS5zdGF0dXMgPT09IDIwMCkgewogICAgICAgICAgICByZXR1cm4gcmVzcG9uc2UuanNvbiAoKTsKICAgICAgICAgIH0KICAgICAgICB9KQogICAgICAgIC50aGVuIChkYXRhID0+IHsKICAgICAgICAgIGZvciAobGV0IGNvdW50cnkgaW4gZGF0YSkgewogICAgICAgICAgICBjb25zdCBjbG9uZSAgICAgPSByb3cuY29udGVudC5jbG9uZU5vZGUgKHRydWUpOwogICAgICAgICAgICBjb25zdCB0ZHMgICAgICAgPSBjbG9uZS5xdWVyeVNlbGVjdG9yQWxsICgndGQnKTsKICAgICAgICAgICAgY29uc3QgaW1nICAgICAgID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCAoJ2ltZycpOwogICAgICAgICAgICBpbWcuc3JjICAgICAgICAgPSBgJHtwYXRofS9wbmcxMDBweC8keyBjb3VudHJ5LnRvTG93ZXJDYXNlICgpIH0ucG5nYDsKICAgICAgICAgICAgaW1nLnN0eWxlLndpZHRoID0gJzQwcHgnOwogICAgICAgICAgICB0ZHNbIDAgXS5hcHBlbmRDaGlsZCAoaW1nKTsKICAgICAgICAgICAgdGRzWyAxIF0udGV4dENvbnRlbnQgPSBkYXRhWyBjb3VudHJ5IF07CiAgICAgICAgICAgIHRib2R5LmFwcGVuZENoaWxkIChjbG9uZSk7CiAgICAgICAgICB9CiAgICAgICAgfSk7CiAgICB9CiAgfQogIGN1c3RvbUVsZW1lbnRzLmRlZmluZSgnd2MtY291bnRyaWVzJywgV0NDb3VudHJpZXMpOwo8L3NjcmlwdD4KPHdjLWNvdW50cmllcz48L3djLWNvdW50cmllcz4KPC9ib2R5Pgo8L2h0bWw+"},"asBuffer":null},"loaded":true}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Template</title>
</head>
<body>
<template id="table">
  <table>
    <thead><tr><th>Flag</th><th>Country</th></tr></thead>
    <tbody></tbody>
  </table>
</template>
<template id="row">
  <tr><td></td><td></td></tr>
</template>
<script>
  class WCCountries extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      const path  = 'https://raw.githubusercontent.com/hjnilsson/country-flags/master';
      const table       = document.querySelector('#table').content.cloneNode(true);
      const tbody       = table.querySelector ('tbody');
      const rowTemplate = document.querySelector ('#row');
      this.shadowRoot.appendChild (table);
      fetch (`${path}/countries.json`)
        .then (response => {
          if (response.status === 200) {
            return response.json ();
          }
        })
        .then (data => {
          for (let country in data) {
            const clone     = row.content.cloneNode (true);
            const tds       = clone.querySelectorAll ('td');
            const img       = document.createElement ('img');
            img.src         = `${path}/png100px/${ country.toLowerCase () }.png`;
            img.style.width = '40px';
            tds[ 0 ].appendChild (img);
            tds[ 1 ].textContent = data[ country ];
            tbody.appendChild (clone);
          }
        });
    }
  }
  customElements.define('wc-countries', WCCountries);
</script>
<wc-countries></wc-countries>
</body>
</html>
result
console