@todojs/

02-template-table

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.1291560262745004","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5UZW1wbGF0ZTwvdGl0bGU+CjwvaGVhZD4KPGJvZHk+Cjx0YWJsZT4KICA8dGhlYWQ+PHRyPjx0aD5GbGFnPC90aD48dGg+Q291bnRyeTwvdGg+PC90cj48L3RoZWFkPgogIDx0Ym9keT48L3Rib2R5Pgo8L3RhYmxlPgo8dGVtcGxhdGUgaWQ9InJvdyI+CiAgPHRyPjx0ZD48L3RkPjx0ZD48L3RkPjwvdHI+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CiAgY29uc3QgcGF0aCAgPSAnaHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL2hqbmlsc3Nvbi9jb3VudHJ5LWZsYWdzL21hc3Rlcic7CiAgY29uc3Qgcm93ICAgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yICgnI3JvdycpOwogIGNvbnN0IHRib2R5ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvciAoJ3RhYmxlID4gdGJvZHknKTsKICBmZXRjaCAoYCR7cGF0aH0vY291bnRyaWVzLmpzb25gKQogICAgLnRoZW4gKHJlc3BvbnNlID0+IHsKICAgICAgaWYgKHJlc3BvbnNlLnN0YXR1cyA9PT0gMjAwKSB7CiAgICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24gKCk7CiAgICAgIH0KICAgIH0pCiAgICAudGhlbiAoZGF0YSA9PiB7CiAgICAgIGZvciAobGV0IGNvdW50cnkgaW4gZGF0YSkgewogICAgICAgIGNvbnN0IGNsb25lICAgICA9IHJvdy5jb250ZW50LmNsb25lTm9kZSAodHJ1ZSk7CiAgICAgICAgY29uc3QgdGRzICAgICAgID0gY2xvbmUucXVlcnlTZWxlY3RvckFsbCAoJ3RkJyk7CiAgICAgICAgY29uc3QgaW1nICAgICAgID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCAoJ2ltZycpOwogICAgICAgIGltZy5zcmMgICAgICAgICA9IGAke3BhdGh9L3BuZzEwMHB4LyR7IGNvdW50cnkudG9Mb3dlckNhc2UgKCkgfS5wbmdgOwogICAgICAgIGltZy5zdHlsZS53aWR0aCA9ICc0MHB4JzsKICAgICAgICB0ZHNbIDAgXS5hcHBlbmRDaGlsZCAoaW1nKTsKICAgICAgICB0ZHNbIDEgXS50ZXh0Q29udGVudCA9IGRhdGFbIGNvdW50cnkgXTsKICAgICAgICB0Ym9keS5hcHBlbmRDaGlsZCAoY2xvbmUpOwogICAgICB9CiAgICB9KTsKPC9zY3JpcHQ+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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Template</title>
</head>
<body>
<table>
  <thead><tr><th>Flag</th><th>Country</th></tr></thead>
  <tbody></tbody>
</table>
<template id="row">
  <tr><td></td><td></td></tr>
</template>
<script>
  const path  = 'https://raw.githubusercontent.com/hjnilsson/country-flags/master';
  const row   = document.querySelector ('#row');
  const tbody = document.querySelector ('table > tbody');
  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);
      }
    });
</script>
</body>
</html>
result
console