@todojs/

05-random-lorem-ipsum-count-words

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.7284142432858993","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5MaWdodCBET008L3RpdGxlPgogIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9Ad2ViY29tcG9uZW50cy93ZWJjb21wb25lbnRzanMvd2ViY29tcG9uZW50cy1sb2FkZXIuanMiPjwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5Pgo8YnV0dG9uIGlkPSJnZXRUZXh0Ij5SYW5kb20gTG9yZW0gSXBzdW08L2J1dHRvbj4KPHdjLXdvcmRzPjwvd2Mtd29yZHM+CjxzY3JpcHQ+CiAgZG9jdW1lbnQucXVlcnlTZWxlY3RvciAoJyNnZXRUZXh0JykuYWRkRXZlbnRMaXN0ZW5lciAoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogICAgY29uc3Qgd29yZHMgICAgICA9IHBhcnNlSW50IChNYXRoLnJhbmRvbSAoKSAqIDIwMCk7CiAgICBjb25zdCBwYXJhZ3JhcGhzID0gcGFyc2VJbnQgKHdvcmRzIC8gMjApOwogICAgZmV0Y2ggKCdodHRwczovL3d3dy5yYW5kb210ZXh0Lm1lL2FwaS9sb3JlbS9wLScgKyBwYXJhZ3JhcGhzICsgJy8xLScgKyB3b3JkcykKICAgICAgLnRoZW4gKGZ1bmN0aW9uIChyZXNwb25zZSkgewogICAgICAgIGlmIChyZXNwb25zZS5zdGF0dXMgPT09IDIwMCkgewogICAgICAgICAgcmV0dXJuIHJlc3BvbnNlLmpzb24gKCk7CiAgICAgICAgfQogICAgICB9KS50aGVuIChmdW5jdGlvbiAoZGF0YSkgewogICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yICgnd2Mtd29yZHMnKS5pbm5lckhUTUwgPSBkYXRhLnRleHRfb3V0OwogICAgfSk7CiAgfSk7CgogIGN1c3RvbUVsZW1lbnRzLmRlZmluZSAoJ3djLXdvcmRzJywgY2xhc3MgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICBjb25zdHJ1Y3RvciAoKSB7CiAgICAgIHN1cGVyICgpOwogICAgICB0aGlzLmF0dGFjaFNoYWRvdyAoe21vZGUgOiAnb3Blbid9KTsKICAgICAgdGhpcy5zaGFkb3dSb290LmlubmVySFRNTCA9ICc8aDM+MCB3b3JkczwvaDM+JzsKICAgIH0KICAgIGNvbm5lY3RlZENhbGxiYWNrICgpIHsKICAgICAgbmV3IE11dGF0aW9uT2JzZXJ2ZXIgKAogICAgICAgIHRoaXMuY291bnQuYmluZCAodGhpcykKICAgICAgKS5vYnNlcnZlICgKICAgICAgICB0aGlzLAogICAgICAgIHthdHRyaWJ1dGVzIDogdHJ1ZSwgY2hpbGRMaXN0IDogdHJ1ZSwgY2hhcmFjdGVyRGF0YSA6IHRydWV9CiAgICAgICk7CiAgICB9CiAgICBjb3VudCAoKSB7CiAgICAgIGNvbnN0IHRleHRzID0gWy4uLnRoaXMucXVlcnlTZWxlY3RvckFsbCAoJ3AnKV0KICAgICAgICAubWFwICgocCkgPT4gcC5pbm5lclRleHQpOwogICAgICBjb25zdCBjb3VudCA9IHRleHRzCiAgICAgICAgLmpvaW4gKCcgJykKICAgICAgICAucmVwbGFjZSAoL1suIT9cXC1dfFxzfFxufFxyL2dpLCAiICIpCiAgICAgICAgLnJlcGxhY2UgKC9bIF17Mix9L2dpLCAiICIpCiAgICAgICAgLnNwbGl0ICgnICcpCiAgICAgICAgLmZpbHRlciAoZnVuY3Rpb24gKHN0cikgewogICAgICAgICAgcmV0dXJuIHN0ci50cmltICgpICE9PSAiIgogICAgICAgIH0pCiAgICAgICAgLmxlbmd0aDsKICAgICAgdGhpcy5zaGFkb3dSb290LmlubmVySFRNTCA9ICc8aDM+JyArIGNvdW50ICsgJyB3b3JkczwvaDM+JyArIHRoaXMuaW5uZXJIVE1MOwogICAgfQoKICB9KTsKPC9zY3JpcHQ+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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Light DOM</title>
  <script src="https://unpkg.com/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
<button id="getText">Random Lorem Ipsum</button>
<wc-words></wc-words>
<script>
  document.querySelector ('#getText').addEventListener ('click', function () {
    const words      = parseInt (Math.random () * 200);
    const paragraphs = parseInt (words / 20);
    fetch ('https://www.randomtext.me/api/lorem/p-' + paragraphs + '/1-' + words)
      .then (function (response) {
        if (response.status === 200) {
          return response.json ();
        }
      }).then (function (data) {
      document.querySelector ('wc-words').innerHTML = data.text_out;
    });
  });

  customElements.define ('wc-words', class extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      this.shadowRoot.innerHTML = '<h3>0 words</h3>';
    }
    connectedCallback () {
      new MutationObserver (
        this.count.bind (this)
      ).observe (
        this,
        {attributes : true, childList : true, characterData : true}
      );
    }
    count () {
      const texts = [...this.querySelectorAll ('p')]
        .map ((p) => p.innerText);
      const count = texts
        .join (' ')
        .replace (/[.!?\\-]|\s|\n|\r/gi, " ")
        .replace (/[ ]{2,}/gi, " ")
        .split (' ')
        .filter (function (str) {
          return str.trim () !== ""
        })
        .length;
      this.shadowRoot.innerHTML = '<h3>' + count + ' words</h3>' + this.innerHTML;
    }

  });
</script>
</body>
</html>
result
console