Einführung

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.

Projektübersicht

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.

Merkmale

• Anpassbare Passwortlänge: Passen Sie die Länge des generierten Passworts mit einem Schieberegler an.
• Auswahl des Zeichentyps: Wählen Sie aus, welche Zeichentypen (Kleinbuchstaben, Großbuchstaben, Zahlen, Symbole) in das Passwort aufgenommen werden sollen.
• Generieren und kopieren: Generieren Sie ein zufälliges Passwort und kopieren Sie es einfach in Ihre Zwischenablage.

Verwendete Technologien

• HTML: Stellt die Struktur und das Layout für den Passwortgenerator bereit.
• CSS: Gestaltet die Benutzeroberfläche und sorgt so für ein modernes und ansprechendes Design.
• JavaScript: Verwaltet die Passwortgenerierungslogik, einschließlich Benutzerinteraktionen und Passwortkopieren.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

Password-Generator/ ├── index.html ├── style.css └── script.js

• index.html: Enthält die HTML-Struktur für den Passwortgenerator.
• style.css: Enthält CSS-Stile, um ein attraktives und ansprechendes Design zu erstellen.
• script.js: Verwaltet die Passwortgenerierungsfunktion und Benutzerinteraktionen.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

   git clone https://github.com/abhishekgurjar-in/Password-Generator.git

   Nach dem Login kopieren

2. Öffnen Sie das Projektverzeichnis:
   

   cd Password-Generator

   Nach dem Login kopieren

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um den Passwortgenerator zu verwenden.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Passen Sie die Passwortlänge anmit dem Schieberegler.
3. Wählen oder deaktivieren Siedie Zeichentypen, die Sie einschließen möchten.
4. Generieren Sie ein Passwort, indem Sie auf die Schaltfläche „Passwort generieren“ klicken.
5. Kopieren Sie das Passwortin Ihre Zwischenablage, indem Sie auf das Kopiersymbol klicken.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur des Passwortgenerators, einschließlich der Eingabefelder, Steuerelemente und des Anzeigebereichs. Hier ist ein Ausschnitt:

          
  
 
Password Generator
 
  content_copy 
  
 
Password Length
  
 
 Include Lowercase Letters (a-z)  
 
 Include Uppercase Letters (A-Z)  
 
 Include Numbers (0-9)  
 
 Include Symbols (@-*)  
  Generate Password  
 
 
Made with ❤️ by Abhishek Gurjar
 
  

CSS

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; }

JavaScript

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); } });

Live-Demo

Hier können Sie sich die Live-Demo des Password Generator-Projekts ansehen.

Abschluss

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!

Credits

Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine JavaScript-Kenntnisse zu verbessern und praktische Web-Tools zu erstellen.

Autor

• Abhishek Gurjar
  • GitHub-Profil

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!