Chia sẻ code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript

Bài viết hướng dẫn tạo QR Code với thư viện JavaScript tích hợp vào website, tạo ra các tiện ích cho người dùng.

Hiện tại QR Code được ứng dụng rất nhiều, vì sự nhanh chóng đáp ứng của nó. Ví dụ sử dụng điện thoại muốn truy cập vào website bán một món hàng để tra cứu thông tin, thay vì phải gõ một đường dẫn rất dài trên điện thoại, các hãng có thể cung cấp 1 QR Code dán lên sản phẩm là đường dẫn đến trang web.

Chia sẻ code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript

Mã QR viết tắt của Quick Response có khả năng lưu trữ nhiều dữ liệu và người dùng có thể dễ dàng truy cập thông tin bằng cách quét mã QR. Trong bài viết này code công cụ tạo QR Code người dùng có thể nhập văn bản hoặc URL để chuyển và tạo mã QR cho nó, để đọc được mã QR thì các bạn cần phải có phần mềm đọc mã hoặc là cộng cụ máy đọc mã QR.

Chia sẻ code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript

Sau đây là source code của công cụ tạo QR Code, mình sẽ chia sẻ code HTML và JavaScript là chính còn CSS thì mình sẽ chỉ để ở mức độ tham khảo và các bạn cần phải chỉnh sử CSS hay tuỳ biến cho phù hợn với Blog của các bạn.

HTML Code chèn vào vị trí bạn muốn hiển thị.

<div class="qr-wrapper">
  <div class="qr-header">
    <h4>QR Code Generator</h4>
    <p>Paste a url or enter text to create QR code</p>
  </div>
  <div class="qr-form">
    <input type="qr-text" spellcheck="false" placeholder="Enter text or url">
    <button class="qr-button">Generate QR Code</button>
  </div>
  <div class="qr-code">
    <img src="" alt="qr-code">
  </div>
</div>

CSS Code(tham khảo) chèn vào trước thẻ </head>

<style>/* <![CDATA[ */
.qr-wrapper{max-width:100%;background:#fff;border-radius:7px;padding:15px;transition:height .2s ease}
.qr-header h4{font-size:21px;font-weight:500}
.qr-header p{margin-top:5px;color:#575757;font-size:16px}
.qr-wrapper .qr-form{margin:20px 0 25px}
.qr-form :where(input,button){width:100%;height:55px;border:none;outline:none;border-radius:5px;transition:.1s ease}
.qr-form input{font-size:18px;padding:0 17px;border:1px solid #eee;transition:.2s ease}
.qr-form input:focus{border:1px solid #7577a9}
.qr-form input::placeholder{color:#999}
.qr-form button{color:#fff;cursor:pointer;margin-top:20px;font-size:17px;background:#7577a9}
.qr-code{opacity:0;display:none;padding:33px 0;border-radius:5px;align-items:center;pointer-events:none;justify-content:center;border:1px solid #ccc}
.qr-wrapper.active .qr-code{opacity:1;display:flex;pointer-events:auto;transition:opacity .5s .05s ease}
.qr-code img{width:170px}
@media (max-width: 430px) {
.qr-header p{color:#696969}
.qr-form :where(input,button){height:52px}
.qr-code img{width:160px}
}
/* ]]> */</style>

JavaScript Code chèn vào trước thẻ </body>

<script>//<![CDATA[
  const qrWrapper = document.querySelector(".qr-wrapper"),
qrInput = qrWrapper.querySelector(".qr-form input"),
generateBtn = qrWrapper.querySelector(".qr-form button"),
qrImg = qrWrapper.querySelector(".qr-code img");
let preValue;
generateBtn.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Generating QR Code...";
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        qrWrapper.classList.add("active");
        generateBtn.innerText = "Generate QR Code";
    });
});

qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        qrWrapper.classList.remove("active");
        preValue = "";
    }
});
//]]></script>

Download demo hoàn chỉnh

Lời kết

Thế là xong toàn bộ code để tạo công cụ tạo QR Code sử dụng HTML, CSS và JavaScrip mình đã chia sẻ ở trên. Các bạn có vấn đề gì liên quan đến code trong bài viết thì có thể comment xuống dưới mình sẽ hỗ trợ nhanh nhất. Và các bạn cũng có thể sử dụng thử công cụ demo ở bên dưới đây:

QR Code Generator

Paste a url or enter text to create QR code

Generate QR Code

Truy cập Bypass Google Account APK để tải file APK nhé