Javascript ile QR Kod Oluşturma
QR kodlar, günlük yaşamda bilgi paylaşımının hızlı ve etkili bir yolu olarak yaygınlaşmıştır. Ürün etiketlerinden menülere, biletlerden kişisel kartvizitlere kadar birçok yerde, kullanıcıların telefon kameralarını kullanarak doğrudan bilgiye ulaşmasını sağlar. QR kodlar, özellikle dijital içerik paylaşımı ve işletmeler için vazgeçilmez bir araç haline gelmiştir. JavaScript ve QRCode.js kütüphanesi ile QR kod oluşturma işlemi oldukça basit ve pratiktir.
Bu yazıda, HTML ve JavaScript ile nasıl QR kod oluşturabileceğinizi öğrenerek web sitenize veya projenize ekleyebileceğiniz kullanışlı bir QR kod oluşturucu geliştireceğiz. Bu basit uygulama ile kullanıcılar, girdiği metin veya URL’yi anında QR koda dönüştürebilecek ve bu kodları istedikleri gibi kullanabilecek.
Bu yazının alt kısmında paylaştığım bağlantıdan örneği inceleyebilirsiniz.
HMTL
// Bu kısmı <head> </head> içerisine ekliyoruz.
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
// Bu kısmı <head> </head> içerisine ekliyoruz.
<div class="container">
<div class="logo-container">
<img src="https://serdarkaraca.com.tr/wp-content/uploads/2024/09/WebSite-Size-White-BG.png" alt="Logo">
</div>
<h1>QR Kod Oluşturucu</h1>
<input type="text" id="qrText" placeholder="QR Koda dönüştürülecek metin veya URL girin">
<button onclick="generateQRCode()">QR Kod Oluştur</button>
<div id="qrCode"></div>
</div>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #4a90e2, #50c7c7);
color: #333;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
width: 100%;
max-width: 400px;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.logo-container img {
max-width: auto;
height: auto;
}
h1 {
font-size: 24px;
margin-bottom: 15px;
color: #4a90e2;
}
input[type="text"] {
width: 100%;
padding: 12px 20px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
margin-top: 15px;
transition: border 0.3s;
}
input[type="text"]:focus {
border-color: #4a90e2;
}
button {
background-color: #4a90e2;
color: #fff;
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 15px;
width: 100%;
}
button:hover {
background-color: #357abd;
}
#qrCode {
margin-top: 20px;
padding: 15px;
background-color: #f7f7f7;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}
JavaScript
function generateQRCode() {
// Mevcut QR kodunu temizleme
document.getElementById("qrCode").innerHTML = "";
// Kullanıcının girdiği metni al
const qrText = document.getElementById("qrText").value;
if (qrText.trim() === "") {
alert("Lütfen bir metin veya URL girin!");
return;
}
// QRCode nesnesini oluştur ve metni QR koda çevir
new QRCode(document.getElementById("qrCode"), {
text: qrText,
width: 200,
height: 200,
colorDark : "#333",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantılardan inceleyebilirsiniz.
Bir Yorum Yazın