Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorstellen zu können: einenPasswortgenerator. Dieses Tool soll Ihnen dabei helfen, auf einfache Weise sichere und zufällige Passwörter zu erstellen. Egal, ob Sie sichere Passwörter für Ihre Online-Konten benötigen oder Ihre JavaScript-Kenntnisse üben möchten, dieser Passwortgenerator ist eine großartige Ergänzung zu Ihrem Toolkit.
DerPassword Generatorist eine webbasierte Anwendung, die es Benutzern ermöglicht, Passwörter mit verschiedenen Konfigurationen zu generieren. Sie können die Passwortlänge anpassen und bestimmte Zeichentypen wie Kleinbuchstaben, Großbuchstaben, Zahlen und Symbole einschließen oder ausschließen. Dieses Projekt zeigt, wie man einen dynamischen Passwortgenerator mit JavaScript erstellt, gepaart mit einer sauberen und benutzerfreundlichen Oberfläche, die mit HTML und CSS erstellt wurde.
Hier ein Überblick über die Projektstruktur:
Password-Generator/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Password-Generator.git
Öffnen Sie das Projektverzeichnis:
cd Password-Generator
Führen Sie das Projekt aus:
Die Datei index.html definiert die Struktur des Passwortgenerators, einschließlich der Eingabefelder, Steuerelemente und des Anzeigebereichs. Hier ist ein Ausschnitt:
Password Generator Password Generator
Password Length
Die style.css-Datei formatiert den Passwortgenerator und macht ihn optisch ansprechend und reaktionsschnell. Nachfolgend sind einige wichtige Stile aufgeführt:
* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { max-width: 100vw; min-height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; color: #fff; font-weight: 600; flex-direction: column; } .container { border: 0.5px solid #fff; border-radius: 10px; padding: 28px 32px; display: flex; flex-direction: column; background: transparent; box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757; } .container h1 { font-size: 1.4rem; margin-block: 8px; } .inputBox { position: relative; } .inputBox span { position: absolute; top: 16px; right: 6px; color: #000; font-size: 28px; cursor: pointer; z-index: 2; } .passBox { background-color: #fff; border: none; outline: none; padding: 10px; width: 300px; border-radius: 4px; font-size: 20px; margin-block: 8px; text-overflow: ellipsis; } .row { display: flex; margin-block: 8px; } .row p, .row label { flex-basis: 100%; font-size: 18px; } .row input[type="checkbox"] { width: 20px; height: 20px; } .genBtn { border: none; outline: none; background-color: #2c619e; padding: 12px 24px; color: #fff; font-size: 18px; margin-block: 8px; font-weight: 700; cursor: pointer; border-radius: 4px; } .genBtn:hover { background-color: #0066ff; } .footer { color: white; margin-top: 150px; text-align: center; } .footer p { font-size: 16px; font-weight: 200; }
Die Datei script.js enthält die Logik zum Generieren von Passwörtern, zum Verwalten von Benutzerinteraktionen und zum Kopieren von Passwörtern in die Zwischenablage. Hier ist ein Ausschnitt:
let inputSlider = document.getElementById("inputSlider"); let sliderValue = document.getElementById("sliderValue"); let passBox = document.getElementById("passBox"); let lowercase = document.getElementById("lowercase"); let uppercase = document.getElementById("uppercase"); let numbers = document.getElementById("numbers"); let symbols = document.getElementById("symbols"); let genBtn = document.getElementById("genBtn"); let copyIcon = document.getElementById("copyIcon"); // Showing input slider value sliderValue.textContent = inputSlider.value; inputSlider.addEventListener("input", () => { sliderValue.textContent = inputSlider.value; }); genBtn.addEventListener("click", () => { passBox.value = generatePassword(); }); let lowerChars = "abcdefghijklmnopqrstuvwxyz"; let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let allNumbers = "0123456789"; let allSymbols = "~!@#$%^&*"; // Function to generate Password function generatePassword() { let genPassword = ""; let allChars = ""; allChars += lowercase.checked ? lowerChars : ""; allChars += uppercase.checked ? upperChars : ""; allChars += numbers.checked ? allNumbers : ""; allChars += symbols.checked ? allSymbols : ""; if (allChars === "") { return genPassword; } let i = 1; while (i <= inputSlider.value) { genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length)); i++; } return genPassword; } copyIcon.addEventListener("click", () => { if (passBox.value !== "") { navigator.clipboard.writeText(passBox.value); copyIcon.innerText = "check"; copyIcon.title = "Password Copied"; setTimeout(() => { copyIcon.innerHTML = "content_copy"; copy Icon.title = ""; }, 3000); } });
Hier können Sie sich die Live-Demo des Password Generator-Projekts ansehen.
Die Erstellung des Passwortgenerators war ein unterhaltsames Projekt, bei dem ich meine Front-End-Entwicklungsfähigkeiten anwenden konnte. Dieses Tool eignet sich zum Generieren sicherer Passwörter und kann eine großartige Ergänzung für Ihre Webentwicklungsprojekte sein. Ich hoffe, Sie finden es genauso hilfreich wie ich. Viel Spaß beim Codieren!
Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine JavaScript-Kenntnisse zu verbessern und praktische Web-Tools zu erstellen.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Passwort-Generator-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!