Notification texts go here Contact Us Buy Now!

Tutorial Membuat QR Code Generator Menggunakan Javascript


QR Code atau Quik Response Code merupakan barcode dua dimensi yang berfungsi untuk menyimpan data. Sebelumnya kita sudah membahas Cara Membuat Barcode Dengan Menggunakan Python selanjutnya kita akan membahas cara membuat barcode dengan menggunakan Javascript. Pertama buat file index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code Generator</title>
    <link rel="stylesheet" href="style.css">
    <div class="wrapper">
        <h1>QR Code Generator</h1>
        <p>Paste a url or enter text to create QR Code</p>
     <div class="form">
        <input type="text" placeholder="Enter text or url">
        <button>Generate QR Code</button>
     <div class="qr-code">
        <img src="bg.jpg" alt="qr-code">

    <script src="script.js"></script>

Ubah file bg.jpg menggunakan file yang kamu punya untuk latar belakang

Buat file style.css.
@import url('');

    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-image: url(bg.jpg);
    background-size: cover;
	background-position: center;
    background: #61049e;
    max-width: 410px;
    border-radius: 7px;
    padding:16px 25px 0;
    transition:height 0.2s ease;
    height: 530px;
header h1{
    font-size: 21px;
    font-weight: 500;
    color: #fff;
header p{
    margin-top: 5px;
    color: #fff;
    font-size: 16px;
.wrapper .form{
    margin: 20px 0 25px;
.form :where(input, button){
    outline: none;
    border-radius: 5px;
.form input{
    font-size: 18px;
    padding:0 17px;
    border: 1px solid #999;
.form button{
    cursor: pointer;
    margin-top: 20px;
    font-size: 17px;
.wrapper .qr-code{
    display: flex;
    padding:33px 0;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    border:1px solid #ccc;
} .qr-code{
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s 0.05s ease;
Untuk file java scriptnya silahkan copy di bawah ini.
const wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input"),
generateBtn = wrapper.querySelector(".form button"),
qrImg = wrapper.querySelector(".qr-code img");

generateBtn.addEventListener("click", () => {
      let qrValue = qrInput.value;
      if(!qrValue) return;//if the input is empty then return from here
      generateBtn.innerText = "Generating QR Code....";
      //geting a QR Code of user entered value using the qrserver
      //api and passing the api returned img src to qrImg
      qrImg.src = `${qrValue}`;
      qrImg.addEventListener("load", () =>{ //once QR code img loaded
     generateBtn.innerText = "Generate QR Code";

qrInput.addEventListener("keyup", () => {
    if(!qrInput.value) {
Save filenya dan lihat hasilnya.

Getting Info...

About the Author

IT Enthusiast

Posting Komentar

It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.