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

Chào các bạn, bài viết hôm nay mình sẽ chia sẻ cho các bạn code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript. Trong bài viết gần đây nhất trên Blog thì mình có chia sẻ Cách thêm Lazy Load quảng cáo Google Adsense cho Blog và Mức độ quan trọng của dấu ngắt trang jumb break và số bài đăng tối đa hiển thị tại trang chỉ mục các bạn có thể đọc nếu các bạn bỏ qua.

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>

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