Stworzyłem generator haseł, ale nie do końca coś mi chce to działać. Wywala błąd o niepoprawnym rozmiarze tablicy to raz, a dwa że nie wiem czy dobrze sprawdzam że pole typu checkbox nie zostało zaznaczone.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 0;
margin: 0;
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
.container{
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.2);
border: 2px dotted black;
position: relative;
text-align: center;
border-radius: 10px;
box-shadow: 1px 1px 55px 5px deepskyblue;
}
.container .block{
margin: 10px;
}
.container-pass{
margin: 20px auto;
width: 50%;
height: 70px;
border: 2px solid black;
border-radius: 10px;
}
.container-pass > strong{
display: block;
margin: 5px;
font-size: 20px;
}
.created-password{
margin: 5px 0 5px 0;
font-size: 25px;
font-weight: 900;
color: gray;
}
h1{
text-shadow: 5px 5px 5px gray;
}
button{
display: inline-block;
width: 150px;
height: 60px;
background: #666;
border: 2px solid deepskyblue;
border-radius: 5px;
font-size: 15px;
box-shadow: 1px 1px 70px 1px white;
position: relative;
}
button:before{
content: '';
display: block;
width: 40px;
height: 57px;
background: rgba(255, 255, 255, 0.3);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) skewX(-15deg);
}
</style>
</head>
<body>
<div class="container">
<h1>Generator haseł</h1>
<fieldest>
<legend>Wybierz z ilu znaków ma się składać</legend>
<div class="block">
<input type="radio" value="six" name="characters"> 6 - znaków
<input type="radio" value="eight" name="characters"> 8 - znaków
<input type="radio" value="ten" name="characters"> 10 - znaków
</div>
</fieldest>
<div class="container-pass">
<strong>Twoje Hasło:</strong>
<p class="created-password">-------</p>
</div>
<button type="button" id="btn">Wygeneruj hasło</button>
</div>
<script>
const btn = document.querySelector('#btn');
const charactersRadio = document.querySelectorAll('input[name="characters"]');
const returnedPasswordToPelement = document.querySelector('.created-password');
let selectedValue = null;
let generatedPassword;
var tab = [];
tab[0] = 'a';
tab[1] = '!';
tab[2] = 'b';
tab[3] = '@';
tab[4] = 'c';
tab[5] = '#';
tab[6] = 'd';
tab[7] = '%';
tab[8] = 'e';
tab[9] = '&';
tab[10] = 'f';
btn.addEventListener("click", function(){
for(const radio of charactersRadio){
if(radio.checked) {
let length = Number(radio.value);
let newTab = new Array(length);
for(let i=0; i<newTab.length; i++){
newTab[i] = Math.round(Math.floor()*(9-0+1)+0)
}
for(let j=0; j<newTab.length; j++){
generatedPassword += tab[newTab[j]];
}
}
}
if(radio.value === null){
alert('Nie zaznaczyłeś żadnego pola!');
}
return returnedPasswordToPelement.textContent = generatedPassword;
});
</script>
</body>
</html>