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

Bài viết chia sẻ code công cụ tạo mã QR Code sử dụng HTML, CSS và JavaScript. Mã QR là mã vạch hai chiều bao gồm một mẫu pixel đen trắng.
Chia sẻ code công cụ tạo QR Code sử dụng HTML, CSS và JavaScript
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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 BlogMứ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.

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>

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

qr-code
0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

2 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. Nguyễn Đại Học
      7/11/2022 06:01:00 CH

      Cái này là dạng mã hóa "cái gì đó" thành mã QR em nhỉ?

      Trả lời Xóa
    Mới hơn Cũ hơn

    Maybe You Like

    Xin vui lòng xác nhận đồng ý nhận tin từ NLD Blog