Kode alat pembuat QR Code yang menggunakan HTML, CSS, dan JavaScript

Kode alat pembuat QR Code yang menggunakan HTML, CSS, dan JavaScript artikel yang saya bagikan kali ini.

Halo semuanya, pada artikel kali ini saya akan membagikan kode alat pembuat QR Code yang menggunakan HTML, CSS, dan JavaScript. Pada artikel terakhir di blog, saya telah membagikan Cara menambahkan Lazy Load iklan Google Adsense untuk Blog dan Tingkat pentingnya jeda halaman jumb break dan jumlah postingan maksimum yang ditampilkan di halaman indeks yang dapat Anda baca jika Anda melewatkan.

Kode QR singkatan dari Quick Response memiliki kemampuan untuk menyimpan banyak data dan pengguna dapat dengan mudah mengakses informasi dengan memindai kode QR. Dalam artikel ini, pengguna alat pembuat QR Code dapat memasukkan teks atau URL untuk dikonversi dan membuat kode QR untuknya. Untuk membaca kode QR, Anda perlu memiliki perangkat lunak pembaca kode atau alat pembaca kode QR.

Berikut ini adalah kode sumber alat pembuat QR Code, saya akan membagikan kode HTML dan JavaScript sebagai inti sedangkan CSS akan saya biarkan sebagai referensi dan Anda perlu menyesuaikan CSS atau menyesuaikannya sesuai dengan blog Anda.

Kode HTML ditempatkan di posisi yang ingin Anda tampilkan.

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

Kode CSS (referensi) ditempatkan sebelum </head> tag.

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

Kode JavaScript ditempatkan sebelum </body> tag.

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

Penutup

Itulah seluruh kode untuk membuat alat pembuat QR Code yang menggunakan HTML, CSS, dan JavaScript yang telah saya bagikan di atas. Jika Anda memiliki masalah terkait kode dalam artikel ini, Anda dapat mengomentari di bawah dan saya akan membantu secepat mungkin.

Anda juga dapat mencoba alat demo di bawah ini:

QR Code Generator

Tempelkan URL atau masukkan teks untuk membuat kode QR.

Generate QR Code