remove raw html

js/customElements/pwgen.js

@@ -1,24 +1,75 @@
 class PasswordGenerator extends HTMLElement {
     constructor() {
         super();        
-        this.innerHTML = `
-        <input type="text" disabled id="pwgen-out"><br>
-        <input type="range" min="8" max="128" value="32" id="pwgen-len"><span id="pwgen-len-num">32</span><br>
-        <input type="checkbox" id="pwgen-inc-num" checked> Zahlen<br>
-        <input type="checkbox" id="pwgen-inc-big-char" checked> Großbuchstaben<br>
-        <input type="checkbox" id="pwgen-inc-small-char" checked> Kleinbuchstaben<br>
-        <input type="checkbox" id="pwgen-inc-special-char" checked> Sonderzeichen<br>
-        <button>Generieren</button>
-        `;
 
-        const outValue = this.querySelector("#pwgen-out");
+        const outValue = document.createElement("input");
-        const pwlen = this.querySelector("#pwgen-len");
+        outValue.type = "text";
-        const pwlenSpan = this.querySelector("#pwgen-len-num");
+        this.appendChild(outValue);
-        const includeNum = this.querySelector("#pwgen-inc-num");
+
-        const includeBigChar = this.querySelector("#pwgen-inc-big-char");
+        const lineBreak = document.createElement("br");
-        const includeSmallChar = this.querySelector("#pwgen-inc-small-char");
+        this.appendChild(lineBreak);
-        const includeSpecialChat = this.querySelector("#pwgen-inc-special-char");
+
-        const button = this.querySelector("button");
+        const pwlen = document.createElement("input");
+        pwlen.type = "range";
+        pwlen.min = "8";
+        pwlen.max = "128";
+        pwlen.value = "32";
+        this.appendChild(pwlen);
+
+        const pwlenSpan = document.createElement("span");
+        pwlenSpan.innerText = "32";
+        this.appendChild(pwlenSpan);
+
+        const lineBreak2 = document.createElement("br");
+        this.appendChild(lineBreak2);
+
+        const includeNum = document.createElement("input");
+        includeNum.type = "checkbox";
+        includeNum.checked = true;
+        this.appendChild(includeNum);
+
+        const includeNumText = document.createTextNode(" Zahlen");
+        this.appendChild(includeNumText);
+
+        const lineBreak3 = document.createElement("br");
+        this.appendChild(lineBreak3);
+
+        const includeBigChar = document.createElement("input");
+        includeBigChar.type = "checkbox";
+        includeBigChar.checked = true;
+        this.appendChild(includeBigChar);
+
+        const bigCharText = document.createTextNode(" Großbuchstaben");
+        this.appendChild(bigCharText);
+
+        const lineBreak4 = document.createElement("br");
+        this.appendChild(lineBreak4);
+
+        const includeSmallChar = document.createElement("input");
+        includeSmallChar.type = "checkbox";
+        includeSmallChar.checked = true;
+        this.appendChild(includeSmallChar);
+
+        const includeSmallCharText = document.createTextNode(" Kleinbuchstaben");
+        this.appendChild(includeSmallCharText);
+
+        const lineBreak5 = document.createElement("br");
+        this.appendChild(lineBreak5);
+
+        const includeSpecialChar = document.createElement("input");
+        includeSpecialChar.type = "checkbox";
+        includeSpecialChar.checked = true;
+        this.appendChild(includeSpecialChar);
+
+        const inclideSpecialCharText = document.createTextNode(" Sonderzeichen");
+        this.appendChild(inclideSpecialCharText);
+
+        const lineBreak6 = document.createElement("br");
+        this.appendChild(lineBreak6);
+
+        const button = document.createElement("button");
+        button.innerText = "Generieren";
+        this.appendChild(button);
 
         pwlen.oninput = () => {
             pwlenSpan.innerText = pwlen.value;
@@ -34,7 +85,7 @@ class PasswordGenerator extends HTMLElement {
         includeSmallChar.onchange = () => {
             button.click();
         }
-        includeSpecialChat.onchange = () => {
+        includeSpecialChar.onchange = () => {
             button.click();
         }
 
@@ -51,7 +102,7 @@ class PasswordGenerator extends HTMLElement {
             if(includeSmallChar.checked) {
                 possibleChar += "abcdefghijklmnopqrstuvwxyz";
             }
-            if(includeSpecialChat.checked) {
+            if(includeSpecialChar.checked) {
                 possibleChar += ",;.:-_#'+*?=)(/&%$§\"!°{[]}<>|~"
             }