@todojs/

07-lit-html-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.9512502851502829","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5UZW1wbGF0ZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+CjxzY3JpcHQgdHlwZT0ibW9kdWxlIj4KICBpbXBvcnQgeyBodG1sLCByZW5kZXIgfSBmcm9tICdodHRwczovL3VucGtnLmNvbS9saXQtaHRtbD9tb2R1bGUnOwoKICBjb25zdCBwYXRoID0gJ2h0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9oam5pbHNzb24vY291bnRyeS1mbGFncy9tYXN0ZXInOwogIGNvbnN0IHByaXYgPSBuZXcgV2Vha01hcCAoKTsKCiAgY2xhc3MgV0NDb3VudHJpZXMgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICBjb25zdHJ1Y3RvciAoKSB7CiAgICAgIHN1cGVyICgpOwogICAgICB0aGlzLmF0dGFjaFNoYWRvdyAoe21vZGUgOiAnb3Blbid9KTsKICAgICAgcHJpdi5zZXQgKHRoaXMsIHtkYXRhIDoge319KTsKICAgICAgZmV0Y2ggKGAkeyBwYXRoIH0vY291bnRyaWVzLmpzb25gKQogICAgICAgIC50aGVuIChyZXNwb25zZSA9PiB7CiAgICAgICAgICBpZiAocmVzcG9uc2Uuc3RhdHVzID09PSAyMDApIHsKICAgICAgICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24gKCk7CiAgICAgICAgICB9CiAgICAgICAgfSkKICAgICAgICAudGhlbiAoZGF0YSA9PiB7CiAgICAgICAgICB0aGlzLmRhdGEgPSBkYXRhOwogICAgICAgIH0pOwogICAgfQoKICAgIHJlbmRlciAoKSB7CiAgICAgIGNvbnN0IGRhdGEgPSB0aGlzLmRhdGE7CiAgICAgIHJlbmRlciAoaHRtbGAKICAgICAgPHN0eWxlPgogICAgICAgIGltZyB7IHdpZHRoOiA0MHB4OyB9CiAgICAgIDwvc3R5bGU+CiAgICAgIDx0YWJsZT4KICAgICAgICA8dGhlYWQ+PHRyPjx0aD5GbGFnPC90aD48dGg+Q291bnRyeTwvdGg+PC90cj48L3RoZWFkPgogICAgICAgIDx0Ym9keT4KICAgICAgICAgICR7IE9iamVjdC5rZXlzIChkYXRhKS5tYXAgKGNvdW50cnkgPT4gaHRtbGAKICAgICAgICAgIDx0cj4KICAgICAgICAgICAgPHRkPgogICAgICAgICAgICAgIDxpbWcgc3JjPSIkeyBwYXRoIH0vcG5nMTAwcHgvJHsgY291bnRyeS50b0xvd2VyQ2FzZSAoKSB9LnBuZ1wiPgogICAgICAgICAgICA8L3RkPgogICAgICAgICAgICA8dGQ+CiAgICAgICAgICAgICAgJHsgZGF0YVsgY291bnRyeSBdIH0KICAgICAgICAgICAgPC90ZD4KICAgICAgICAgIDwvdHI+YCkgfQogICAgICAgIDwvdGJvZHk+CiAgICAgIDwvdGFibGU+CiAgICBgLCB0aGlzLnNoYWRvd1Jvb3QpOwogICAgfQoKICAgIGdldCBkYXRhICgpIHsKICAgICAgcmV0dXJuIHByaXYuZ2V0ICh0aGlzKS5kYXRhOwogICAgfQoKICAgIHNldCBkYXRhICh2YWx1ZSkgewogICAgICBwcml2LnNldCAodGhpcywge2RhdGEgOiB2YWx1ZX0pOwogICAgICB0aGlzLnJlbmRlciAoKTsKICAgIH0KICB9CgogIGN1c3RvbUVsZW1lbnRzLmRlZmluZSAoJ3djLWNvdW50cmllcycsIFdDQ291bnRyaWVzKTsKPC9zY3JpcHQ+Cjx3Yy1jb3VudHJpZXM+PC93Yy1jb3VudHJpZXM+CjwvYm9keT4KPC9odG1sPg=="},"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
67
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Template</title>
</head>
<body>
<script type="module">
  import { html, render } from 'https://unpkg.com/lit-html?module';

  const path = 'https://raw.githubusercontent.com/hjnilsson/country-flags/master';
  const priv = new WeakMap ();

  class WCCountries extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      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;
      render (html`
      <style>
        img { width: 40px; }
      </style>
      <table>
        <thead><tr><th>Flag</th><th>Country</th></tr></thead>
        <tbody>
          ${ Object.keys (data).map (country => html`
          <tr>
            <td>
              <img src="${ path }/png100px/${ country.toLowerCase () }.png\">
            </td>
            <td>
              ${ data[ country ] }
            </td>
          </tr>`) }
        </tbody>
      </table>
    `, this.shadowRoot);
    }

    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