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">
<head>
<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">
</head>
<body>
<div class="wrapper">
<header>
<h1>QR Code Generator</h1>
<p>Paste a url or enter text to create QR Code</p>
</header>
<div class="form">
<input type="text" placeholder="Enter text or url">
<button>Generate QR Code</button>
</div>
<div class="qr-code">
<img src="bg.jpg" alt="qr-code">
</div>
</div>
<script src="script.js"></script>
</body>
</html>Ubah file bg.jpg menggunakan file yang kamu punya untuk latar belakang
Buat file style.css.
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display:flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: url(bg.jpg);
background-size: cover;
background-position: center;
}
.wrapper{
height:260px;
background: #61049e;
max-width: 410px;
border-radius: 7px;
padding:16px 25px 0;
transition:height 0.2s ease;
}
.wrapper.active{
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){
width:100%;
height:55px;
border:none;
outline: none;
border-radius: 5px;
}
.form input{
font-size: 18px;
padding:0 17px;
border: 1px solid #999;
}
.form button{
color:#fff;
cursor: pointer;
margin-top: 20px;
font-size: 17px;
background:#2d05be;
}
.wrapper .qr-code{
display: flex;
opacity:0;
pointer-events:none;
padding:33px 0;
border-radius: 5px;
align-items: center;
justify-content: center;
border:1px solid #ccc;
}
.wrapper.active .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 = `https://api.qrserver.com/v1/create-qr-code/?size=170x170&data=${qrValue}`;
qrImg.addEventListener("load", () =>{ //once QR code img loaded
wrapper.classList.add("active");
generateBtn.innerText = "Generate QR Code";
});
});
qrInput.addEventListener("keyup", () => {
if(!qrInput.value) {
wrapper.classList.remove("active");
}
});Save filenya dan lihat hasilnya.