Bina Laman Web Penjana Kod QR-tutorial css-php.cn

Bina Laman Web Penjana Kod QR

PHPz

Lepaskan： 2024-08-23 14:31:32

asal

1237 orang telah melayarinya

Build a QR Code Generator Website

pengenalan

Helo, rakan pembangun! Saya teruja untuk membentangkan projek terbaharu saya: Penjana Kod QR. 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.

Gambaran Keseluruhan Projek

Penjana Kod QR ialah 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.

Ciri-ciri

Antara Muka Mesra Pengguna: Reka bentuk yang ringkas dan bersih yang memudahkan untuk menjana kod QR.
Penjanaan Kod QR Dinamik: Menjana kod QR serta-merta berdasarkan input teks yang disediakan oleh pengguna.
Reka Bentuk Responsif: Memastikan pengalaman yang konsisten merentas pelbagai peranti dan saiz skrin.

Teknologi yang Digunakan

HTML: Menstruktur halaman web dan elemen input.
CSS: Menggayakan antara muka pengguna, memastikan reka bentuk yang bersih dan responsif.
JavaScript: Mengurus logik untuk menjana kod QR dan mengendalikan interaksi pengguna.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Penjana Kod QR.
style.css: Termasuk gaya CSS untuk meningkatkan penampilan dan responsif aplikasi.
script.js: Mengurus logik penjanaan kod QR dan interaksi pengguna.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd QR-Code-Generator
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk mula menggunakan Penjana Kod QR.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan teks dalam medan input untuk menjana kod QR.
Klik butang "Jana Kod QR" untuk melihat kod QR yang dijana berdasarkan teks yang dimasukkan.
Imbas kod QR dengan mana-mana pembaca kod QR untuk melihat teks yang dikodkan.

Penerangan Kod

HTML

Fail index.html menyediakan struktur asas Penjana Kod QR, termasuk medan input dan butang untuk menjana kod QR. Berikut adalah coretan:

<!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>

Salin selepas log masuk

CSS

Fail style.css menggayakan Penjana Kod QR, menyediakan reka letak moden dan mesra pengguna. Berikut ialah 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;
}

Salin selepas log masuk

JavaScript

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Penjana Kod QR di sini.

Kesimpulan

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!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan saya untuk meningkatkan kemahiran pembangunan web saya, memfokuskan pada JavaScript dan interaksi pengguna.

Pengarang

Abhishek Gurjar
- Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Penjana Kod QR. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!