Cel: Ulepszenie narzędzia tworzącego mocne, ale łatwe do zapamiętania hasła. Dodatkowo generator ma uczyć, jak takie hasła tworzyć.
Zadanie: Rozwiń mój generator. Uwzględnij wiedzę o dobrych hasłach. Zadbaj by rozumieć kod.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Losowe Hasło</title>
<style>
body { font-family: sans-serif; padding: 20px; }
#haslo { margin-top: 20px; font-weight: bold; font-size: 1.2em; }
input { margin-bottom: 10px; padding: 5px; width: 300px; display: block; }
#specjalnePreview { font-style: italic; color: gray; margin-top: -8px; margin-bottom: 10px; }
</style>
</head>
<body>
<input type="text" id="sentencja" placeholder="Wpisz swoją ulubioną sentencję">
<input type="text" id="liczba" placeholder="Wpisz swoją ulubioną liczbę">
<div id="specjalnePreview">Znaki specjalne: <span id="znakiSpecjalne"></span></div>
<input type="text" id="separator" placeholder="Wpisz swój ulubiony separator">
<button onclick="generujHaslo()">Generuj</button>
<div id="haslo">Hasło dla Ciebie: <span id="wynik"></span></div>
<script>
let elementy = ["kawa", "zupa", "rower", "los", "nic"];
const mapaSpecjalnychZnaków = {
"0": ")", "1": "!", "2": "@", "3": "#", "4": "$",
"5": "%", "6": "^", "7": "&", "8": "*", "9": "("
};
function generujZPierwszychLiter(sentencja) {
return sentencja
.split(" ")
.filter(s => s.length > 0)
.map(s => s[0])
.join("");
}
function zamienLiczbeNaZnakiSpecjalne(liczbaStr) {
return liczbaStr
.split("")
.map(cyfra => mapaSpecjalnychZnaków[cyfra] || "")
.join("");
}
document.getElementById("liczba").addEventListener("input", () => {
const liczba = document.getElementById("liczba").value.trim();
const znaki = zamienLiczbeNaZnakiSpecjalne(liczba);
document.getElementById("znakiSpecjalne").textContent = znaki;
});
function generujHaslo() {
const tekst = document.getElementById("sentencja").value.trim();
const liczba = document.getElementById("liczba").value.trim();
const separator = document.getElementById("separator").value.trim();
if (tekst.length > 0) {
const skrót = generujZPierwszychLiter(tekst);
elementy[0] = skrót;
}
if (liczba.length > 0 && /^\d+$/.test(liczba)) {
elementy[1] = liczba;
elementy[2] = zamienLiczbeNaZnakiSpecjalne(liczba);
}
const kopia = [...elementy];
for (let i = kopia.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[kopia[i], kopia[j]] = [kopia[j], kopia[i]];
}
const wybrane = kopia.slice(0, 3);
const haslo = wybrane.join(separator);
document.getElementById("wynik").textContent = haslo;
}
</script>
</body>
</html>
Twój komentarz