Einführung
Hallo, liebe Entwickler! Ich freue mich, mein neuestes Projekt vorstellen zu können: einen QR-Code-Generator. Dieses Projekt ist eine großartige Möglichkeit, in JavaScript einzutauchen und sich auf die dynamische Generierung von QR-Codes basierend auf Benutzereingaben zu konzentrieren. Egal, ob Sie neu in der Webentwicklung sind oder Ihre JavaScript-Kenntnisse verbessern möchten, dieses QR-Code-Generator-Projekt ist eine hervorragende Gelegenheit, etwas Nützliches zu lernen und zu erstellen.
Projektübersicht
Der QR-Code-Generator ist eine webbasierte Anwendung, die es Benutzern ermöglicht, QR-Codes aus jeder Texteingabe zu generieren. Dieses Projekt zeigt, wie man eine einfache und interaktive Benutzeroberfläche erstellt, APIs von Drittanbietern integriert und Benutzereingaben effektiv verarbeitet.
Merkmale
-
Benutzerfreundliche Oberfläche: Einfaches und klares Design, das das Generieren von QR-Codes erleichtert.
-
Dynamische QR-Code-Generierung: Erzeugt sofort einen QR-Code basierend auf der vom Benutzer bereitgestellten Texteingabe.
-
Responsive Design: Sorgt für ein einheitliches Erlebnis auf verschiedenen Geräten und Bildschirmgrößen.
Verwendete Technologien
-
HTML: Strukturiert die Webseite und Eingabeelemente.
-
CSS: Gestaltet die Benutzeroberfläche und sorgt für ein klares und ansprechendes Design.
-
JavaScript: Verwaltet die Logik zum Generieren von QR-Codes und zum Verarbeiten von Benutzerinteraktionen.
Projektstruktur
Hier ein kurzer Blick auf die Projektstruktur:
QR-Code-Generator/
├── index.html
├── style.css
└── script.js
Nach dem Login kopieren
-
index.html: Enthält die HTML-Struktur für den QR-Code-Generator.
-
style.css: Enthält CSS-Stile, um das Erscheinungsbild und die Reaktionsfähigkeit der Anwendung zu verbessern.
-
script.js: Verwaltet die QR-Code-Generierungslogik und Benutzerinteraktionen.
Installation
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
-
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/QR-Code-Generator.git
Nach dem Login kopieren
-
Öffnen Sie das Projektverzeichnis:
cd QR-Code-Generator
Nach dem Login kopieren
-
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um den QR-Code-Generator zu verwenden.
Verwendung
-
Öffnen Sie die Website in einem Webbrowser.
-
Geben Sie Text in das Eingabefeld ein, um einen QR-Code zu generieren.
-
Klicken Sie auf die Schaltfläche „QR-Code generieren“, um den basierend auf dem eingegebenen Text generierten QR-Code anzuzeigen.
-
Scannen Sie den QR-Code mit einem beliebigen QR-Code-Lesegerät, um den codierten Text anzuzeigen.
Code-Erklärung
HTML
Die Datei index.html stellt die Grundstruktur des QR-Code-Generators bereit, einschließlich des Eingabefelds und der Schaltflächen zum Generieren des QR-Codes. Hier ist ein Ausschnitt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QR Code Generator</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div class="box">
<section class="upper">
<h1>QR Code Generator</h1>
<p>Paste text to create QR Code</p>
</section>
<form id="qrForm">
<input
id="qrInputText"
type="text"
name="qrText"
placeholder="Enter Text"
/>
<button id="generateBtn" type="submit">Generate QR Code</button>
</form>
<section id="qrContainer" class="qr_container">
<img id="qrImage" src="./qr.webp" alt="QR Code" />
</section>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
Nach dem Login kopieren
CSS
Die style.css-Datei formatiert den QR-Code-Generator und bietet ein modernes und benutzerfreundliches Layout. Hier sind einige wichtige Stile:
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
:root {
--primary: #47185c;
--primary-dark: #14001d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Poppins", sans-serif;
}
body {
background-color: var(--primary);
}
.container {
display: grid;
place-items: center;
height: 80vh;
}
.box {
padding: 20px;
width: 400px;
background-color: white;
}
.upper h1 {
font-size: 32px;
font-weight: 400;
line-height: 32px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 10px;
}
form input {
width: 100%;
height: 40px;
padding: 10px 15px;
}
form button {
width: 100%;
height: 40px;
padding: 10px 15px;
background-color: var(--primary);
border: none;
color: white;
opacity: 0.9;
transition: 0.3s ease-in;
}
.qr_container {
border: 1px solid var(--primary);
display: flex;
justify-content: center;
height: 0;
opacity: 0;
transition: opacity 0.3s ease-in, height 0.1s ease;
}
.qr_container.show {
padding: 10px;
height: 150px;
opacity: 1;
}
.qr_container img {
height: 100%;
}
.footer {
color: white;
margin: 50px;
text-align: center;
}
Nach dem Login kopieren
JavaScript
Die Datei script.js verwaltet die Logik für die Generierung der QR-Codes und die Verarbeitung von Benutzerinteraktionen. Hier ist ein Ausschnitt:
const qrFormEl = document.getElementById("qrForm");
const qrImageEl = document.getElementById("qrImage");
const qrContainerEl = document.getElementById("qrContainer");
const qrInputTextEl = document.getElementById("qrInputText");
const generateBtnEl = document.getElementById("generateBtn");
const renderQRCode = (url) => {
if (!url) return;
generateBtnEl.innerText = "Generating QR Code...";
qrImageEl.src = url;
qrImageEl.addEventListener("load", () => {
qrContainerEl.classList.add("show");
generateBtnEl.innerText = "Generate QR Code";
});
};
qrFormEl.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(qrFormEl);
const text = formData.get("qrText");
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${text}`;
renderQRCode(qrCodeUrl);
});
qrInputTextEl.addEventListener("keyup", () => {
if (!qrInputTextEl.value.trim()) {
qrContainerEl.classList.remove("show");
}
});
Nach dem Login kopieren
Live-Demo
Sie können sich hier die Live-Demo des QR Code Generators ansehen.
Abschluss
Das Erstellen dieses QR-Code-Generators war eine unterhaltsame und lehrreiche Erfahrung, die mir geholfen hat, JavaScript besser zu verstehen und zu erfahren, wie man mit APIs arbeitet, um dynamische Webanwendungen zu erstellen. Ich hoffe, dieses Projekt inspiriert Sie dazu, auch mit JavaScript etwas Cooles zu bauen. Viel Spaß beim Codieren!
Credits
Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine Webentwicklungsfähigkeiten zu verbessern, wobei ich mich auf JavaScript und Benutzerinteraktion konzentrierte.
Autor
Das obige ist der detaillierte Inhalt vonErstellen Sie eine QR-Code-Generator-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
