diff --git a/js/customElements/pwgen.js b/js/customElements/pwgen.js index d54ff9707031dd8d551b040ff4531267b48c36b8..f74093d29f8daebae2a45aaebb7c7b32c300ebc3 100644 --- a/js/customElements/pwgen.js +++ b/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 pwlen = this.querySelector("#pwgen-len"); - const pwlenSpan = this.querySelector("#pwgen-len-num"); - const includeNum = this.querySelector("#pwgen-inc-num"); - const includeBigChar = this.querySelector("#pwgen-inc-big-char"); - const includeSmallChar = this.querySelector("#pwgen-inc-small-char"); - const includeSpecialChat = this.querySelector("#pwgen-inc-special-char"); - const button = this.querySelector("button"); + super(); + + const outValue = document.createElement("input"); + outValue.type = "text"; + this.appendChild(outValue); + + const lineBreak = document.createElement("br"); + this.appendChild(lineBreak); + + 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 += ",;.:-_#'+*?=)(/&%$§\"!°{[]}<>|~" }