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.
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.
Hier ein kurzer Blick auf die Projektstruktur:
QR-Code-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/QR-Code-Generator.git
Öffnen Sie das Projektverzeichnis:
cd QR-Code-Generator
Führen Sie das Projekt aus:
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>
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;
}
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");
}
});
Sie können sich hier die Live-Demo des QR Code Generators ansehen.
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!
Dieses Projekt wurde als Teil meiner Reise entwickelt, um meine Webentwicklungsfähigkeiten zu verbessern, wobei ich mich auf JavaScript und Benutzerinteraktion konzentrierte.
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!
Verwendung der Informix-Funktion
Was ist der Hauptunterschied zwischen C-Sprache und Python?
So fangen Sie belästigende Anrufe ab
So verbinden Sie PHP mit der MSSQL-Datenbank
Was tun, wenn beim Klicken auf das Eingabefeld kein Cursor angezeigt wird?
So konvertieren Sie Excel in VCF
Einführung in die Bedeutung ungültiger Syntax
CPU
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
