<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>generator haseł</title>
<link href="https://fonts.googleapis.com/css?family=Lato&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header"><h1>Generator haseł</h1></div>
<div class="how-many-characters">Wybierz z ilu znaków ma się składać hasło:</div>
<div class="row">
<label>6 znaków <input type="radio" value="6" name="character"></label>
<label>8 znaków <input type="radio" value="8" name="character"></label>
<label>10 znaków <input type="radio" value="10" name="character" class="exception"></label>
</div>
<div class="window-with-generated-password">
<input type="text" value="PASSWORD" class="generated-password">
</div>
<div class="button">
<button type="button">Generuj</button>
</div>
<!-- pseudo element -->
<div class="pseudo-element"></div>
</div>
<script>
let wrapper = document.querySelector('.wrapper');
let inputGeneratedPassword = wrapper.querySelector(':scope .generated-password');
let btn = wrapper.querySelector(':scope button');
let radioInputs = wrapper.querySelectorAll(':scope input[type="radio"]');
let tab = ['a', 'k', 'N', 'W', 'x', '7', 'h', 'o', 'n', '*', '?', '/', 'r', '8', 'j', 'n', '', 'h', '#', '5', '-', 'g', 'b', '*', 'm'];
inputGeneratedPassword.addEventListener("click", function(){
this.setAttribute('value', '');
}, false);
btn.addEventListener("click", function(){
for(let i=0; i<radioInputs.length; i++){
if(radioInputs[i].checked){
let value = parseInt(radioInputs[i].value);
let randomNumbers = [];
let password;
if(value === 6){
for(let i = 0; i<value; i++){
randomNumbers[i] = Math.floor(Math.random() * 24);
console.log(randomNumbers[i]);
}
for(let j = 0; j<randomNumbers.length; j++){
password += tab[randomNumbers[j]];
console.log(tab[randomNumbers[j]]);
}
console.log(randomNumbers.length, password);
inputGeneratedPassword.value = password;
}
if(value === 8){
for(let i = 0; i<value; i++){
randomNumbers[i] = Math.floor(Math.random() * 24);
console.log(randomNumbers[i]);
}
for(let j = 0; j<randomNumbers.length; j++){
password += tab[randomNumbers[j]];
console.log(tab[randomNumbers[j]]);
}
console.log(randomNumbers.length, password);
inputGeneratedPassword.value = password;
}
if(value === 10){
for(let i = 0; i<value; i++){
randomNumbers[i] = Math.floor(Math.random() * 24);
console.log(randomNumbers[i]);
}
for(let j = 0; j<randomNumbers.length; j++){
password += tab[randomNumbers[j]];
console.log(tab[randomNumbers[j]]);
}
console.log(randomNumbers.length, password);
inputGeneratedPassword.value = password;
}
break;
}
}
}, false)
</script>
</body>
</html>
Czy ktoś mi może wytłumaczyć dlaczego oprócz wygenerowanego hasła dodaje mi na początek undefined analizowałem to jakiś czas, ale nie doszedłem do wniosku czemu to mi się tak generejue. Przepraszam że tyle kodu ale chciałem wstawić już z css i html abyście mieli pogląd na to. Niestety ale jednak skrypt nie pozwala mi wstawić stylu css więc z góry sorry za brak stylów.
