Password checking site with HTML, CSS and JavaScript and the code
I have updated the static website on my pc. The password checking tool I moved to an external site with the name passwortsachen.html because my To-do-list got a notice board, and then it did not match it with the password checking.
You can select the password length from 8 characters to 32 characters, big and small letters, numbers and special character. Then you generate the password and can copy it to where you need it.
This generated password will be checked automatically in the field „Passwort prüfen“. The min length is 10. Is everything green, then you can use it.
I have generated three files: HTML-file, CSS-file and JS (JavaScript) file that are in three different folders, one for HTML files, one for CSS-files and one for JavaScript files.
The code
The HTML-Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Passwort-Tools</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Visual Studio Code" />
<link rel="stylesheet" href="CSS/passwortsachen.css" />
</head>
<body>
<h1>Passwort-Tools</h1>
<div id="generator-section">
<h2>Passwort Generierung</h2>
<label for="lengthSlider">Länge: <span id="lengthValue">12</span> Zeichen</label>
<input type="range" id="lengthSlider" min="8" max="32" value="12">
<div class="criteria">
<input type="checkbox" id="checkUppercase" checked> <label for="checkUppercase">Großbuchstaben (A-Z)</label><br>
<input type="checkbox" id="checkLowercase" checked> <label for="checkLowercase">Kleinbuchstaben (a-z)</label><br>
<input type="checkbox" id="checkNumbers" checked> <label for="checkNumbers">Zahlen (0-9)</label><br>
<input type="checkbox" id="checkSymbols" checked> <label for="checkSymbols">Sonderzeichen (!@#$)</label>
</div>
<button onclick="generatePassword()" id="generateBtn">Passwort generieren</button>
<button onclick="copyToClipboard('generatedPassword')" id="copyBtn">Kopieren</button>
<div class="result-box">
<input type="text" id="generatedPassword" readonly value="Wird generiert...">
</div>
</div>
<hr> <div id="strength-section">
<h2>Passwort Stärke-Check</h2>
<form id="passwordForm">
<label for="passwordInput">Passwort prüfen</label><br>
<div class="password-wrapper">
<input type="password" id="passwordInput" name="passwordInput">
<span id="togglePassword">
<img id="passwordToggleIcon" src="icons/augenzu.png" alt="Passwort anzeigen/verbergen" width="20" height="20">
</span>
</div>
<p>Länge: <span id="lengthDisplay">0</span> (Mindestlänge: <span id="minLengthDisplay">10</span>)</p>
</form>
<ul id="strengthChecklist">
<li id="checkUpper" class="fail">❌ Großbuchstaben</li>
<li id="checkLower" class="fail">❌ Kleinbuchstaben</li>
<li id="checkNumber" class="fail">❌ Zahlen</li>
<li id="checkSymbol" class="fail">❌ Sonderzeichen</li>
<li id="checkLength" class="fail">❌ Mindestlänge (<span id="minLenCheck">10</span> Zeichen)</li>
</ul>
<div class="strength-bar-container">
<div id="strengthBar"></div>
</div>
<p id="overallStrength">Stärke: Sehr schwach</p>
<p id="feedbackMessage" style="color: grey; font-style: italic;">Bitte geben Sie Ihr Passwort ein.</p>
</div>
<script src="javascript/passwortlange.js"></script>
</body>CSS
body {
margin: 100px;
min-width: 250px;
font-family: system-ui, -apple-system, sans-serif;
background: rgba(167, 17, 4, 0.133);
color: #333333;
}
h1 {
color: white;
margin: 0 0 20px 0;
font-size: 2em;
}
/* Container für Input und Symbol */
.password-wrapper {
position: relative; /* WICHTIG: Erlaubt absolute Positionierung des Kind-Elements */
display: inline-block; /* Damit der Wrapper nur so breit ist wie nötig */
margin-bottom: 10px;
}
/* Stil für das Input-Feld selbst */
.password-wrapper input {
padding-right: 35px; /* Platz für das Symbol schaffen */
}
/* Stil für das Auge-Symbol */
#togglePassword {
position: absolute;
top: 50%; /* Vertikal mittig positionieren */
right: 5px; /* Abstand zum rechten Rand des Containers */
transform: translateY(-50%); /* Exakte vertikale Zentrierung */
cursor: pointer; /* Zeigt an, dass es klickbar ist */
color: grey;
user-select: none; /* Verhindert, dass das Icon beim Doppelklick markiert wird */
font-size: 20px;
}
/* Styling für den Generator-Bereich */
#generator-section, #strength-section {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 30px;
border-radius: 8px;
background-color: #f9f9f9;
}
#lengthSlider {
width: 80%;
margin: 15px 0;
}
.criteria {
margin: 10px 0 20px 0;
}
#generateBtn, #copyBtn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
#generateBtn {
background-color: #2ecc71; /* Grün */
color: white;
}
#copyBtn {
background-color: #3498db; /* Blau */
color: white;
}
.result-box {
margin-top: 15px;
}
#generatedPassword {
width: 90%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1.1em;
font-family: monospace;
}
/* Styling für die Stärke-Checkliste */
#strengthChecklist {
list-style: none;
padding: 0;
}
#strengthChecklist li {
margin: 5px 0;
font-size: 0.95em;
}
.pass {
color: #27ae60; /* Dunkelgrün */
}
.fail {
color: #c0392b; /* Dunkelrot */
}
/* Stärke-Balken */
.strength-bar-container {
background-color: #eee;
border-radius: 5px;
height: 10px;
margin-top: 15px;
}
#strengthBar {
height: 100%;
width: 0%;
border-radius: 5px;
transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}JavaScript
// ==================== GLOBALE KONSTANTEN ====================
const MIN_LENGTH = 10;
const ICON_OPEN = 'icons/augenauf.png';
const ICON_CLOSED = 'icons/augenzu.png';
// Zeichenpools für die Generierung
const CHAR_UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const CHAR_LOWER = 'abcdefghijklmnopqrstuvwxyz';
const CHAR_NUMBER = '0123456789';
const CHAR_SYMBOL = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
// ==================== GENERATOR FUNKTIONEN ====================
function generatePassword() {
const length = parseInt(document.getElementById('lengthSlider').value);
// 1. Zeichenpools sammeln
let pool = '';
let requiredChars = [];
if (document.getElementById('checkUppercase').checked) {
pool += CHAR_UPPER;
requiredChars.push(CHAR_UPPER[Math.floor(Math.random() * CHAR_UPPER.length)]);
}
if (document.getElementById('checkLowercase').checked) {
pool += CHAR_LOWER;
requiredChars.push(CHAR_LOWER[Math.floor(Math.random() * CHAR_LOWER.length)]);
}
if (document.getElementById('checkNumbers').checked) {
pool += CHAR_NUMBER;
requiredChars.push(CHAR_NUMBER[Math.floor(Math.random() * CHAR_NUMBER.length)]);
}
if (document.getElementById('checkSymbols').checked) {
pool += CHAR_SYMBOL;
requiredChars.push(CHAR_SYMBOL[Math.floor(Math.random() * CHAR_SYMBOL.length)]);
}
if (pool.length === 0) {
document.getElementById('generatedPassword').value = "Keine Kriterien gewählt!";
return;
}
let password = requiredChars.join('');
// 2. Restliche Zeichen zufällig auffüllen
for (let i = password.length; i < length; i++) {
password += pool[Math.floor(Math.random() * pool.length)];
}
// 3. Mischen, um die erforderlichen Zeichen zu verstecken
password = password.split('').sort(() => 0.5 - Math.random()).join('');
document.getElementById('generatedPassword').value = password;
// Generiertes Passwort auch im Stärke-Check-Feld anzeigen (falls gewünscht)
document.getElementById('passwordInput').value = password;
checkPasswordStrength();
}
function copyToClipboard(elementId) {
const element = document.getElementById(elementId);
element.select(); // Text auswählen
element.setSelectionRange(0, 99999); // Für mobile Geräte
navigator.clipboard.writeText(element.value); // In Zwischenablage kopieren
const button = document.getElementById('copyBtn');
button.textContent = "Kopiert!";
setTimeout(() => { button.textContent = "Kopieren"; }, 1000);
}
// ==================== STÄRKEPRÜFUNG FUNKTIONEN ====================
function checkPasswordStrength() {
const passwordInput = document.getElementById('passwordInput');
const lengthDisplay = document.getElementById('lengthDisplay');
const feedbackMessage = document.getElementById('feedbackMessage');
const strengthBar = document.getElementById('strengthBar');
const password = passwordInput.value;
const currentLength = password.length;
lengthDisplay.textContent = currentLength;
// 1. Kriterien-Prüfung (Reguläre Ausdrücke)
const checks = {
upper: /[A-Z]/.test(password),
lower: /[a-z]/.test(password),
number: /\d/.test(password),
symbol: /[^A-Za-z0-9]/.test(password),
length: currentLength >= MIN_LENGTH
};
let criteriaMet = 0;
// 2. Checklist und Zähler aktualisieren
for (const key in checks) {
const isMet = checks[key];
let id;
switch(key) {
case 'upper': id = 'checkUpper'; break;
case 'lower': id = 'checkLower'; break;
case 'number': id = 'checkNumber'; break;
case 'symbol': id = 'checkSymbol'; break;
case 'length': id = 'checkLength'; break;
}
const li = document.getElementById(id);
if (li) {
li.className = isMet ? 'pass' : 'fail';
li.innerHTML = isMet ? '✅ ' + li.textContent.substring(2) : '❌ ' + li.textContent.substring(2);
}
if (isMet) criteriaMet++;
}
// 3. Stärke-Balken und Feedback aktualisieren
const totalCriteria = 5;
const strengthPercentage = (criteriaMet / totalCriteria) * 100;
let strengthText = "";
let barColor = "";
if (criteriaMet === 0) {
strengthText = "Sehr schwach";
barColor = "#c0392b"; // Rot
} else if (criteriaMet === 1) {
strengthText = "Schwach";
barColor = "#e67e22"; // Orange
} else if (criteriaMet === 2 || criteriaMet === 3) {
strengthText = "Mittel";
barColor = "#f1c40f"; // Gelb
} else if (criteriaMet === 4) {
strengthText = "Stark";
barColor = "#2980b9"; // Hellblau
} else if (criteriaMet === 5) {
strengthText = "Sehr Stark";
barColor = "#27ae60"; // Grün
}
document.getElementById('overallStrength').textContent = `Stärke: ${strengthText}`;
strengthBar.style.width = `${strengthPercentage}%`;
strengthBar.style.backgroundColor = barColor;
// 4. Feedback-Nachricht aktualisieren (alte Längenprüfung)
if (currentLength === 0) {
feedbackMessage.textContent = 'Bitte geben Sie Ihr Passwort ein.';
} else if (criteriaMet === totalCriteria) {
feedbackMessage.textContent = '👍 Hervorragend! Alle Kriterien erfüllt.';
} else {
feedbackMessage.textContent = 'Verbesserung nötig: Das Passwort erfüllt nicht alle Kriterien.';
}
}
// ==================== SICHTBARKEITS-TOGGLE (Wie zuvor) ====================
const togglePasswordVisibility = () => {
const passwordInput = document.getElementById('passwordInput');
const passwordToggleIcon = document.getElementById('passwordToggleIcon');
if (!passwordInput || !passwordToggleIcon) return;
const currentType = passwordInput.getAttribute('type');
const newType = currentType === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', newType);
if (newType === 'text') {
passwordToggleIcon.src = ICON_OPEN;
} else {
passwordToggleIcon.src = ICON_CLOSED;
}
};
// ==================== START (Event Listener) ====================
document.addEventListener('DOMContentLoaded', () => {
// Initialisierungselemente
const passwordInput = document.getElementById('passwordInput');
const togglePasswordSpan = document.getElementById('togglePassword');
const lengthSlider = document.getElementById('lengthSlider');
const lengthValue = document.getElementById('lengthValue');
// Minimale Länge anzeigen
document.getElementById('minLengthDisplay').textContent = MIN_LENGTH;
document.getElementById('minLenCheck').textContent = MIN_LENGTH;
// Aktionen registrieren
if (passwordInput) {
// Stärke-Check bei Eingabe
passwordInput.addEventListener('input', checkPasswordStrength);
}
if (togglePasswordSpan) {
// Sichtbarkeits-Umschaltung beim Klicken
togglePasswordSpan.addEventListener('click', togglePasswordVisibility);
}
if (lengthSlider) {
// Generator-Länge aktualisieren
lengthSlider.addEventListener('input', () => {
lengthValue.textContent = lengthSlider.value;
});
}
// Beim Start: Passwort generieren und Stärke-Check ausführen
generatePassword();
checkPasswordStrength();
});