@todojs/

05-string-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.7491553449875061","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5UZW1wbGF0ZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CjxzY3JpcHQ+CiAgY29uc3QgcGF0aCA9ICdodHRwczovL3Jhdy5naXRodWJ1c2VyY29udGVudC5jb20vaGpuaWxzc29uL2NvdW50cnktZmxhZ3MvbWFzdGVyJzsKICBjb25zdCBwcml2ID0gbmV3IFdlYWtNYXAgKCk7CgogIGNsYXNzIFdDQ291bnRyaWVzIGV4dGVuZHMgSFRNTEVsZW1lbnQgewogICAgY29uc3RydWN0b3IgKCkgewogICAgICBzdXBlciAoKTsKICAgICAgdGhpcy5hdHRhY2hTaGFkb3cgKHttb2RlIDogJ29wZW4nfSk7CiAgICAgIHRoaXMuc2hhZG93Um9vdC5pbm5lckhUTUwgPSBgCiAgICAgIDxzdHlsZT4KICAgICAgICBpbWcgeyB3aWR0aDogNDBweDsgfQogICAgICA8L3N0eWxlPgogICAgICA8dGFibGU+CiAgICAgICAgPHRoZWFkPjx0cj48dGg+RmxhZzwvdGg+PHRoPkNvdW50cnk8L3RoPjwvdHI+PC90aGVhZD4KICAgICAgICA8dGJvZHk+PC90Ym9keT4KICAgICAgPC90YWJsZT4KICAgIGA7CiAgICAgIHByaXYuc2V0ICh0aGlzLCB7ZGF0YSA6IHt9fSk7CiAgICAgIGZldGNoIChgJHsgcGF0aCB9L2NvdW50cmllcy5qc29uYCkKICAgICAgICAudGhlbiAocmVzcG9uc2UgPT4gewogICAgICAgICAgaWYgKHJlc3BvbnNlLnN0YXR1cyA9PT0gMjAwKSB7CiAgICAgICAgICAgIHJldHVybiByZXNwb25zZS5qc29uICgpOwogICAgICAgICAgfQogICAgICAgIH0pCiAgICAgICAgLnRoZW4gKGRhdGEgPT4gewogICAgICAgICAgdGhpcy5kYXRhID0gZGF0YTsKICAgICAgICB9KTsKICAgIH0KCiAgICByZW5kZXIgKCkgewogICAgICBjb25zdCBkYXRhICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgID0gdGhpcy5kYXRhOwogICAgICB0aGlzLnNoYWRvd1Jvb3QucXVlcnlTZWxlY3RvciAoJ3Rib2R5JykuaW5uZXJIVE1MID0gYAogICAgICAkewogICAgICAgIE9iamVjdC5rZXlzIChkYXRhKS5tYXAgKGNvdW50cnkgPT4gYAogICAgICAgICAgPHRyPgogICAgICAgICAgICA8dGQ+CiAgICAgICAgICAgICAgPGltZyBzcmM9IiR7IHBhdGggfS9wbmcxMDBweC8keyBjb3VudHJ5LnRvTG93ZXJDYXNlICgpIH0ucG5nXCI+CiAgICAgICAgICAgIDwvdGQ+CiAgICAgICAgICAgIDx0ZD4keyBkYXRhWyBjb3VudHJ5IF0gfTwvdGQ+CiAgICAgICAgICA8L3RyPmApLmpvaW4gKCcnKQogICAgICAgIH0KICAgIGA7CiAgICB9CgogICAgZ2V0IGRhdGEgKCkgewogICAgICByZXR1cm4gcHJpdi5nZXQgKHRoaXMpLmRhdGE7CiAgICB9CgogICAgc2V0IGRhdGEgKHZhbHVlKSB7CiAgICAgIHByaXYuc2V0ICh0aGlzLCB7ZGF0YSA6IHZhbHVlfSk7CiAgICAgIHRoaXMucmVuZGVyICgpOwogICAgfQogIH0KCiAgY3VzdG9tRWxlbWVudHMuZGVmaW5lICgnd2MtY291bnRyaWVzJywgV0NDb3VudHJpZXMpOwo8L3NjcmlwdD4KPHdjLWNvdW50cmllcz48L3djLWNvdW50cmllcz4KPC9ib2R5Pgo8L2h0bWw+"},"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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Template</title>
</head>
<body>
<script>
  const path = 'https://raw.githubusercontent.com/hjnilsson/country-flags/master';
  const priv = new WeakMap ();

  class WCCountries extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      this.shadowRoot.innerHTML = `
      <style>
        img { width: 40px; }
      </style>
      <table>
        <thead><tr><th>Flag</th><th>Country</th></tr></thead>
        <tbody></tbody>
      </table>
    `;
      priv.set (this, {data : {}});
      fetch (`${ path }/countries.json`)
        .then (response => {
          if (response.status === 200) {
            return response.json ();
          }
        })
        .then (data => {
          this.data = data;
        });
    }

    render () {
      const data                                        = this.data;
      this.shadowRoot.querySelector ('tbody').innerHTML = `
      ${
        Object.keys (data).map (country => `
          <tr>
            <td>
              <img src="${ path }/png100px/${ country.toLowerCase () }.png\">
            </td>
            <td>${ data[ country ] }</td>
          </tr>`).join ('')
        }
    `;
    }

    get data () {
      return priv.get (this).data;
    }

    set data (value) {
      priv.set (this, {data : value});
      this.render ();
    }
  }

  customElements.define ('wc-countries', WCCountries);
</script>
<wc-countries></wc-countries>
</body>
</html>
result
console