建立一个二维码生成器网站-css教程-PHP中文网

Build a QR Code Generator Website

介绍

各位开发者大家好！我很高兴向大家展示我的最新项目：QR 代码生成器。该项目是深入研究 JavaScript 的好方法，重点关注如何根据用户输入动态生成 QR 码。无论您是 Web 开发新手还是希望提高 JavaScript 技能，这个 QR 代码生成器项目都是学习和创建有用内容的绝佳机会。

项目概况

QR 代码生成器 是一个基于 Web 的应用程序，允许用户从任何文本输入生成 QR 代码。该项目演示了如何创建简单的交互式用户界面、集成第三方 API 以及有效处理用户输入。

特征

用户友好的界面：简单干净的设计，可以轻松生成二维码。
动态二维码生成：根据用户提供的文本输入即时生成二维码。
响应式设计：确保在各种设备和屏幕尺寸上获得一致的体验。

使用的技术

HTML：构建网页和输入元素。
CSS：设置用户界面的样式，确保简洁且响应灵敏的设计。
JavaScript：管理生成 QR 码和处理用户交互的逻辑。

项目结构

以下是项目结构的快速浏览：

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

登录后复制

index.html：包含 QR 代码生成器的 HTML 结构。
style.css：包含 CSS 样式以增强应用程序的外观和响应能力。
script.js：管理二维码生成逻辑和用户交互。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

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

登录后复制

打开项目目录:
```
cd QR-Code-Generator
```
登录后复制
运行项目:
- 在网络浏览器中打开index.html 文件以开始使用二维码生成器。

用法

在网络浏览器中打开网站。
在输入字段中输入文字即可生成二维码。
点击“生成二维码”按钮即可查看根据输入的文字生成的二维码。
使用任何二维码阅读器扫描二维码即可查看编码文本。

代码说明

超文本标记语言

index.html 文件提供了二维码生成器的基本结构，包括用于生成二维码的输入字段和按钮。这是一个片段：

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

登录后复制

CSS

style.css 文件设置 QR 码生成器的样式，提供现代且用户友好的布局。以下是一些关键样式：

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

登录后复制

JavaScript

script.js 文件管理生成 QR 码和处理用户交互的逻辑。这是一个片段：

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

登录后复制