Como criar um gerador de QR Code usando HTML, CSS e JavaScript

neste artigo vamos compartilhar o código de um gerador de QR Code usando HTML, CSS e JavaScript. Um código QR é um código de barras bidimensional que consiste em um padrão de pixel preto e branco.

VTrick Blog | Gerador de QR Code usando HTML, CSS e JavaScript

O QR Code significa Resposta rápida que, tem a capacidade de armazenar muitos dados e, os usuários podem acessar facilmente as informações digitalizando o QR Code.

Neste artigo, o usuário pode inserir texto ou URL para converter e gerar um QR Code para ler o link, você precisa de um software leitor de código ou uma ferramenta de leitura de código.

---

Criar um gerador de QR Code usando HTML, CSS e JavaScript

Aqui está o código fonte da ferramenta geradora de QR Code, vou compartilhar o código HTML e JavaScript como principal, e o CSS será apenas para referência e você precisa editar o CSS ou customizá-lo para se adequar ao Blog.

Código HTML inserido na posição que deseja exibir.

<div class="qr-wrapper">
  <div class="qr-header">
    <h4>Gerador QR Code</h4>
    <p>Cole um url ou digite o texto para criar o código QR</p>
  </div>
  <div class="qr-form">
    <input type="qr-text" spellcheck="false" placeholder="Digite o texto ou url">
    <button class="qr-button">Gerar QR Code</button>
  </div>
  <div class="qr-code">
    <img src="" alt="qr-code">
  </div>
</div>

Código CSS (referência) inserido antes da tag de nome </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>

Código JavaScript inserido antes da tag de nome </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 = "Gerando 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>

---

Conclusão

Esse é o código para criar um gerador de QR Code usando HTML, CSS e JavaScrip. Se você tiver algum problema relacionado ao código do artigo, pode comentar abaixo e, eu o ajudarei o mais rápido possível. E você também pode experimentar a ferramenta de demonstração abaixo:

---

Gerador de QR Code

Cole um url ou digite o texto para criar o QR Code