Helo, rakan pemaju! Saya teruja untuk membentangkan projek terbaharu saya:QR Code Generator. Projek ini ialah cara terbaik untuk menyelami JavaScript, memfokuskan pada cara menjana kod QR secara dinamik berdasarkan input pengguna. Sama ada anda baru dalam pembangunan web atau ingin meningkatkan kemahiran JavaScript anda, projek Penjana Kod QR ini merupakan peluang terbaik untuk belajar dan mencipta sesuatu yang berguna.
TheQR Code Generatorialah aplikasi berasaskan web yang membolehkan pengguna menjana kod QR daripada sebarang input teks. Projek ini menunjukkan cara mencipta antara muka pengguna yang ringkas dan interaktif, menyepadukan API pihak ketiga dan mengendalikan input pengguna dengan berkesan.
Berikut ialah pandangan ringkas pada struktur projek:
QR-Code-Generator/ ├── index.html ├── style.css └── script.js
Untuk memulakan projek, ikut langkah berikut:
Klon repositori:
git clone https://github.com/abhishekgurjar-in/QR-Code-Generator.git
Buka direktori projek:
cd QR-Code-Generator
Jalankan projek:
Fail index.html menyediakan struktur asas Penjana Kod QR, termasuk medan input dan butang untuk menjana kod QR. Berikut adalah coretan:
QR Code Generator QR Code Generator
Paste text to create QR Code
![]()
Fail style.css menggayakan Penjana Kod QR, menyediakan reka letak moden dan mesra pengguna. Berikut adalah beberapa gaya utama:
@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; }
Fail script.js menguruskan logik untuk menjana kod QR dan mengendalikan interaksi pengguna. Berikut adalah coretan:
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"); } });
Anda boleh menyemak demo langsung Penjana Kod QR di sini.
Membina Penjana Kod QR ini merupakan pengalaman yang menyeronokkan dan pendidikan yang membantu saya lebih memahami JavaScript dan cara bekerja dengan API untuk mencipta aplikasi web dinamik. Saya harap projek ini memberi inspirasi kepada anda untuk membina sesuatu yang menarik dengan JavaScript juga. Selamat mengekod!
Projek ini dibangunkan sebagai sebahagian daripada perjalanan saya untuk meningkatkan kemahiran pembangunan web saya, memfokuskan pada JavaScript dan interaksi pengguna.
Atas ialah kandungan terperinci Bina Laman Web Penjana Kod QR. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!