@todojs/

04-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.1614939611214854","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5MaWdodCBET008L3RpdGxlPgogIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9Ad2ViY29tcG9uZW50cy93ZWJjb21wb25lbnRzanMvd2ViY29tcG9uZW50cy1sb2FkZXIuanMiPjwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5Pgo8c2NyaXB0PgogIGN1c3RvbUVsZW1lbnRzLmRlZmluZSAoJ3djLXdvcmRzJywgY2xhc3MgZXh0ZW5kcyBIVE1MRWxlbWVudCB7CiAgICBjb25zdHJ1Y3RvciAoKSB7CiAgICAgIHN1cGVyICgpOwogICAgICB0aGlzLmF0dGFjaFNoYWRvdyAoe21vZGUgOiAnb3Blbid9KTsKICAgICAgdGhpcy5zaGFkb3dSb290LmlubmVySFRNTCA9ICc8cD4wPC9wPic7CiAgICB9CiAgICBjb25uZWN0ZWRDYWxsYmFjayAoKSB7CiAgICAgIHNldFRpbWVvdXQgKHRoaXMuY291bnQuYmluZCAodGhpcyksIDEwKTsKICAgIH0KICAgIGNvdW50ICgpIHsKICAgICAgY29uc3QgdGV4dHMgPSBbLi4udGhpcy5xdWVyeVNlbGVjdG9yQWxsICgncCcpXS5tYXAgKGZ1bmN0aW9uKHApIHsKICAgICAgICByZXR1cm4gcC5pbm5lclRleHQ7CiAgICAgIH0pOwogICAgICBjb25zdCBjb3VudCA9IHRleHRzCiAgICAgICAgLmpvaW4gKCcgJykKICAgICAgICAucmVwbGFjZSAoL1suIT9cXC1dfFxzfFxufFxyL2dpLCAiICIpCiAgICAgICAgLnJlcGxhY2UgKC9bIF17Mix9L2dpLCAiICIpCiAgICAgICAgLnNwbGl0ICgnICcpCiAgICAgICAgLmZpbHRlciAoZnVuY3Rpb24gKHN0cikgewogICAgICAgICAgcmV0dXJuIHN0ci50cmltICgpICE9PSAiIgogICAgICAgIH0pCiAgICAgICAgLmxlbmd0aDsKICAgICAgdGhpcy5zaGFkb3dSb290LmlubmVySFRNTCA9ICc8aDM+JyArIGNvdW50ICsgJyB3b3JkczwvaDM+JyArIHRoaXMuaW5uZXJIVE1MOwogICAgfQogIH0pOwo8L3NjcmlwdD4KPHdjLXdvcmRzPgogIDxwPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIEZ1c2NlIHF1aXMgbnVsbGEgdmVsIGVzdAogICAgZGlnbmlzc2ltIGxvYm9ydGlzIGlkIGVnZXQgZXJhdC4gQWxpcXVhbSBldSBzdXNjaXBpdCByaXN1cywgYWMgcG9ydHRpdG9yIGRvbG9yLgogICAgU2VkIGNvbmRpbWVudHVtIGxhb3JlZXQgc29kYWxlcy4gUHJvaW4gY29uZGltZW50dW0gbWFzc2EganVzdG8sIGVnZXQgZmluaWJ1cwogICAgbGlndWxhIHRpbmNpZHVudCBldC4gQWxpcXVhbSBtYWxlc3VhZGEsIGxlY3R1cyBhdCBjb25ndWUgc29sbGljaXR1ZGluLCBqdXN0byBxdWFtCiAgICBkYXBpYnVzIGVyb3MsIG5vbiBsYW9yZWV0IG51bmMgbnVuYyBzaXQgYW1ldCBhbnRlLiA8L3A+CiAgPHA+TnVsbGEgYXQgdG9ydG9yIGFjIGF1Z3VlIGZhY2lsaXNpcyBldWlzbW9kIGluIGFjIGVzdC4gSW50ZWdlciBzZWQgYXJjdSBpZCBqdXN0bwogICAgdmVuZW5hdGlzIGVsZW1lbnR1bSB1dCBlZ2V0IG51bGxhLiBEdWlzIGFsaXF1ZXQgdml2ZXJyYSB1cm5hLCBldSBmcmluZ2lsbGEgbWF1cmlzCiAgICBmaW5pYnVzIGEuIE1hZWNlbmFzIHZlbCB2dWxwdXRhdGUgbmVxdWUsIGFjIHJob25jdXMgbWFzc2EuIE1hZWNlbmFzIGxvYm9ydGlzCiAgICBudWxsYSBhdCB0ZW1wb3IgZmV1Z2lhdC4gTnVsbGEgZXUgYmliZW5kdW0gZWxpdC4gQ3JhcyBiaWJlbmR1bSBlbGl0IGVyYXQsIG5vbgogICAgc3VzY2lwaXQgbGVvIGZldWdpYXQgc2l0IGFtZXQuIFNlZCB0ZW1wdXMgZGFwaWJ1cyBkaWFtLCBhYyBzYWdpdHRpcyBudWxsYSBhbGlxdWFtCiAgICB2aXRhZS4gRG9uZWMgcXVpcyBlcmF0LjwvcD4KPC93Yy13b3Jkcz4KPC9ib2R5Pgo8L2h0bWw+"},"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
<!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>
<script>
  customElements.define ('wc-words', class extends HTMLElement {
    constructor () {
      super ();
      this.attachShadow ({mode : 'open'});
      this.shadowRoot.innerHTML = '<p>0</p>';
    }
    connectedCallback () {
      setTimeout (this.count.bind (this), 10);
    }
    count () {
      const texts = [...this.querySelectorAll ('p')].map (function(p) {
        return 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>
<wc-words>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla vel est
    dignissim lobortis id eget erat. Aliquam eu suscipit risus, ac porttitor dolor.
    Sed condimentum laoreet sodales. Proin condimentum massa justo, eget finibus
    ligula tincidunt et. Aliquam malesuada, lectus at congue sollicitudin, justo quam
    dapibus eros, non laoreet nunc nunc sit amet ante. </p>
  <p>Nulla at tortor ac augue facilisis euismod in ac est. Integer sed arcu id justo
    venenatis elementum ut eget nulla. Duis aliquet viverra urna, eu fringilla mauris
    finibus a. Maecenas vel vulputate neque, ac rhoncus massa. Maecenas lobortis
    nulla at tempor feugiat. Nulla eu bibendum elit. Cras bibendum elit erat, non
    suscipit leo feugiat sit amet. Sed tempus dapibus diam, ac sagittis nulla aliquam
    vitae. Donec quis erat.</p>
</wc-words>
</body>
</html>
result
console